Tag

Tag marks a status (“Active”) or a category (“Group”). The colour comes from tone.

import { Tag } from '@beyul/sulmu-ui'

Source · Figma

Examples

Tones and variants

subtle (the default) has a tinted background; solid is filled with white text. The list of tone names is exported as tones.

brandgrayredorangegreenbluepurpleteal

brandgrayredorangegreenbluepurpleteal

import { Flex, Stack, Tag, tones } from '@beyul/sulmu-ui'

export default function Example() {
  return (
    <Stack gap={3}>
      <Flex gap={2} wrap>
        {tones.map((tone) => (
          <Tag key={tone} tone={tone}>
            {tone}
          </Tag>
        ))}
      </Flex>
      <Flex gap={2} wrap>
        {tones.map((tone) => (
          <Tag key={tone} tone={tone} variant="solid">
            {tone}
          </Tag>
        ))}
      </Flex>
    </Stack>
  )
}

Small tags and icons

size="sm" is the small uppercase badge.

GroupClientDraftConfirmed

import { Flex, Tag, TickCircleIcon } from '@beyul/sulmu-ui'

export default function Example() {
  return (
    <Flex gap={2} align="center" wrap>
      <Tag tone="brand" variant="solid" size="sm">
        Group
      </Tag>
      <Tag tone="green" variant="solid" size="sm">
        Client
      </Tag>
      <Tag tone="gray" size="sm">
        Draft
      </Tag>
      <Tag tone="green" leftIcon={<TickCircleIcon size="2xs" />}>
        Confirmed
      </Tag>
    </Flex>
  )
}

Props

Prop	Type	Default	Description
tone	"brand" | "gray" | "red" | "orange" | "green" | "blue" | "purple" | "teal"	gray	Colour pair. Status: green, orange, red, blue, purple. Default: gray.
variant	"subtle" | "solid"	subtle	subtle: tinted background (default). solid: filled, white text.
size	"sm" | "md"	-	md: status tag. sm: small uppercase badge such as GROUP.
leftIcon	ReactNode	-

Tag also accepts every span attribute.

Usage notes

• Use the same tone for the same meaning everywhere: green for success, orange for warning, red for danger, blue for information.
• A tag is not interactive. For a removable or clickable chip, compose a Tag with a button.