Tag

Compact chip for displaying selected values, filters, tags, or removable entities.

Examples

Default

Design

<Tag label="Design" />

With Icon

Design

<Tag label="Design" icon={TagIcon} />

Removable

Removable

<Tag label="Removable" onRemove={() => undefined} />

Sizes

SmallMediumLarge

<HStack align="center" gap={2}>
  <Tag icon={TagIcon} label="Small" size="sm" />
  <Tag icon={TagIcon} label="Medium" size="md" />
  <Tag icon={TagIcon} label="Large" size="lg" />
</HStack>

Colors

redorangeyellowgreentealcyanbluepurplepinkgray

<HStack gap={2} wrap="wrap">
  {colors.map(color => (
    <Tag color={color} key={color} label={color} />
  ))}
</HStack>

Clickable

Click me

<Tag label="Click me" onClick={() => undefined} />

Clickable Removable

Editable

<Tag label="Editable" onClick={() => undefined} onRemove={() => undefined} />

Link Tag

Link tag

<Tag label="Link tag" href="#" />

Removable Link

Link

<Tag label="Link" href="#" onRemove={() => undefined} />

Disabled

DisabledDisabledDisabled

<HStack gap={2}>
  <Tag isDisabled label="Disabled" />
  <Tag isDisabled label="Disabled" onClick={() => undefined} />
  <Tag isDisabled label="Disabled" onRemove={() => undefined} />
</HStack>

Hidden Label

Starred

<Tag label="Starred" icon={Star} isLabelHidden />

With End Content

Issues3

<Tag label="Issues" endContent={<Badge color="info" label={3} size="sm" />} />

With Description

Design

<Tag label="Design" description="High priority design task" />

With Tooltip

Design

Design category

<Tag label="Design" tooltip="Design category" />

API

Tag

Compact chip for displaying selected values, filters, tags, or removable entities.

Prop	Type	Default	Description
className	string	—	Additional CSS class names applied to the tag.
color	"red" | "orange" | "yellow" | "green" | "teal" | "cyan" | "blue" | "purple" | "pink" | "gray"	'gray'	Visual color.
data-testid	string	—	Test ID applied to the tag root.
description	string	—	Accessible description for the tag.
endContent	ReactNode	—	Content rendered after the label and before the remove button.
href	string	—	Link destination. When provided, the tag renders as a link.
icon	IconComponent	—	Icon rendered before the label.
isDisabled	boolean	false	Whether the tag is disabled.
isLabelHidden	boolean	false	Whether to visually hide the label while keeping it available to screen readers.
label*	string	—	Tag text.
onClick	MouseEventHandler<HTMLElement>	—	Click handler.
onRemove	(event: MouseEvent<HTMLButtonElement>) => void	—	Called when the remove button is clicked. When provided, a remove button is shown.
ref	Ref<HTMLElement>	—	Ref forwarded to the tag root element.
size	"sm" | "md" | "lg"	'md'	Visual size.
startContent	ReactNode	—	Content rendered before the icon and label.
style	CSSProperties	—	Inline styles applied to the tag.
tooltip	string	—	Tooltip text shown on hover.