npm install @thrivecart/uiyarn add @thrivecart/uipnpm add @thrivecart/uibun add @thrivecart/uiimport { Tag } from '@thrivecart/ui';Simple text tags
<div className="flex flex-wrap gap-2">
<Tag size="sm">Small</Tag>
<Tag size="md">Medium - Default</Tag>
<Tag size="lg">Large</Tag>
</div>Tags with start or end icon elements
<div className="flex flex-wrap gap-2">
<Tag startElement={<MdPerson className="size-4" />} size="sm">Contact</Tag>
<Tag startElement={<MdStar className="size-5" />}>Featured</Tag>
<Tag startElement={<MdLabel className="size-5" />} size="lg">Category</Tag>
</div>Use startElement to pass an avatar or any custom element before the text.
Tags with user avatars via startElement
<div className="flex flex-wrap gap-2">
<Tag size="lg" startElement={
<Avatar size="sm">
<AvatarImage src="https://i.pravatar.cc/48?img=1" alt="John Doe" />
<AvatarFallback>JD</AvatarFallback>
</Avatar>
}>
John Doe
</Tag>
<Tag size="md" startElement={
<Avatar size="sm">
<AvatarImage src="https://i.pravatar.cc/48?img=2" alt="Jane Smith" />
<AvatarFallback>JS</AvatarFallback>
</Avatar>
}>
Jane Smith
</Tag>
<Tag size="sm" startElement={
<Avatar size="xs">
<AvatarImage src="https://i.pravatar.cc/48?img=3" alt="Alex" />
<AvatarFallback>AL</AvatarFallback>
</Avatar>
}>
Alex
</Tag>
</div>Tags with a close button for filter removal
<div className="flex flex-wrap gap-2">
<Tag closable>Removable</Tag>
<Tag closable size="lg">Large Tag</Tag>
<Tag closable size="sm">Small Tag</Tag>
<Tag closable startElement={<MdLabel className="size-5" />}>With Icon</Tag>
</div>Tags in a non-interactive disabled state
<div className="flex flex-wrap gap-2">
<Tag disabled>Disabled</Tag>
<Tag disabled closable>Disabled Closable</Tag>
<Tag disabled startElement={<MdStar className="size-5" />}>Disabled Icon</Tag>
</div>Tag text should be 1-3 words. Long text defeats the compact purpose.
When tags represent applied filters or selections, make them closable so users can remove them.
Tags display information. For clickable actions, use Button or Link.
Limit visible tags per item to 3-5. Show a "+N more" overflow for additional tags.
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'sm' | 'md' | 'lg' | 'lg' | Tag size |
startElement | ReactNode | - | Icon, avatar, or element before the text |
endElement | ReactNode | - | Icon or element after the text (hidden when closable) |
closable | boolean | false | Show a close/remove button |
onClose | () => void | - | Callback when close button is clicked |
disabled | boolean | false | Disable the tag and close button |
children | ReactNode | - | Tag text content |
className | string | - | Additional className |
aria-label="Remove" for screen readers.