Tag

Used for categorizing or labeling content.

Plain Tag

Closable Tag

<div className="flex gap-2">
  <Tag>Plain Tag</Tag>
  <Tag>Closable Tag</Tag>
</div>

Examples

Sizes

Use the size prop to change the size of the tag.

Extra Small

Small

Medium

Large

Extra Large

<div className="flex flex-col gap-2">
  <div className="flex gap-2">
    <Tag size="xs">Extra Small</Tag>
    <Tag size="xs">Extra Small <LuX /></Tag>
    <Tag size="xs">Extra Small <LuCheck /></Tag>
  </div>
  <div className="flex gap-2">
    <Tag size="sm">Small</Tag>
    <Tag size="sm">Small <LuX /></Tag>
    <Tag size="sm">Small <LuCheck /></Tag>
  </div>
  <div className="flex gap-2">
    <Tag size="md">Medium</Tag>
    <Tag size="md">Medium <LuX /></Tag>
    <Tag size="md">Medium <LuCheck /></Tag>
  </div>
  <div className="flex gap-2">
    <Tag size="lg">Large</Tag>
    <Tag size="lg">Large <LuX /></Tag>
    <Tag size="lg">Large <LuCheck /></Tag>
  </div>
  <div className="flex gap-2">
    <Tag size="xl">Extra Large</Tag>
    <Tag size="xl">Extra Large <LuX /></Tag>
    <Tag size="xl">Extra Large <LuCheck /></Tag>
  </div>
</div>

Colors

Use the colorPalette prop to change the color of the tag.

gray

Content

orange

Content

teal

Content

green

Content

red

Content

<div className="grid grid-cols-[8ch_auto_auto_auto] items-center gap-2">
  <Text>gray</Text>
  <Tag colorPalette="gray">Content</Tag>
  <Tag colorPalette="gray">Content <LuX /></Tag>
  <Tag colorPalette="gray">Content <LuCheck /></Tag>
  <Text>orange</Text>
  <Tag colorPalette="orange">Content</Tag>
  <Tag colorPalette="orange">Content <LuX /></Tag>
  <Tag colorPalette="orange">Content <LuCheck /></Tag>
  <Text>teal</Text>
  <Tag colorPalette="teal">Content</Tag>
  <Tag colorPalette="teal">Content <LuX /></Tag>
  <Tag colorPalette="teal">Content <LuCheck /></Tag>
  <Text>green</Text>
  <Tag colorPalette="green">Content</Tag>
  <Tag colorPalette="green">Content <LuX /></Tag>
  <Tag colorPalette="green">Content <LuCheck /></Tag>
  <Text>red</Text>
  <Tag colorPalette="red">Content</Tag>
  <Tag colorPalette="red">Content <LuX /></Tag>
  <Tag colorPalette="red">Content <LuCheck /></Tag>
</div>

Avatar

The tag component has been designed to work well with the Avatar component.

Emily xs

Emily sm

Emily md

Emily lg

Emily xl

<div className="flex items-center gap-2">
  <Tag size="xs" className="rounded-full">
    <Avatar src="https://i.pravatar.cc/300?u=1" size="xs" />
    Emily xs
  </Tag>
  <Tag size="sm" className="rounded-full">
    <Avatar src="https://i.pravatar.cc/300?u=1" size="sm" />
    Emily sm
  </Tag>
  <Tag size="md" className="rounded-full">
    <Avatar src="https://i.pravatar.cc/300?u=1" size="md" />
    Emily md
  </Tag>
  <Tag size="lg" className="rounded-full">
    <Avatar src="https://i.pravatar.cc/300?u=1" size="lg" />
    Emily lg
  </Tag>
  <Tag size="xl" className="rounded-full">
    <Avatar src="https://i.pravatar.cc/300?u=1" size="xl" />
    Emily xl
  </Tag>
</div>