Components / Status

Tag and StatusTag

Tag is a quiet outlined category label, e.g. an article type. StatusTag is the small accent pill for 'Coming soon' in menus and beside page titles.

Extracted fromMarketing site

Import

tsx
import { Tag, StatusTag } from "@somnia-chain/ui"
// in a Next.js app, internal links use next/link:
import { Tag, StatusTag } from "@somnia-chain/ui/next"

Examples

Tags

ResearchCase studyComing soonComing soonLegacy
examples/tag/default.tsxShow code
tsx
import { StatusTag, Tag } from "@somnia-chain/ui"

export default function Tags() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <Tag>Research</Tag>
      <Tag>Case study</Tag>
      <StatusTag />
      <StatusTag size="sm">Coming soon</StatusTag>
      <StatusTag size="sm">Legacy</StatusTag>
    </div>
  )
}

Props

Tag

PropTypeDefaultDescription
...props<span> attributes—Any other attribute, e.g. id, role, aria-* or a data-* test hook, goes on the <span>.

StatusTag

PropTypeDefaultDescription
childrenReactNode"Coming soon"Label.
size"xs" | "sm""xs"xs for menus, sm beside headings.
...props<span> attributes—Any other attribute, e.g. id, role, aria-* or a data-* test hook, goes on the <span>.