Tag

Tag is a short label for a status, a category or a keyword. It can be closable, or work as a toggle with checkable.

Demos

Type

type picks the color role: a tinted background, a border and text in the same hue. bordered={false} drops the border.

Size and shape

Four sizes, plus round and strong.

Closable

closable adds a × button with an accessible name from the locale. Clicking it calls onClose and doesn’t reach the tag’s own onClick unless triggerClickOnClose is set.

Checkable

A checkable tag is a toggle: it renders as role="checkbox", and click, Enter or Space call onCheckedChange.

Icon

Custom color

color overrides the background, border and text color of one tag. Take the colors from the Raft palette so the tag stays in the system and follows the theme into dark mode: step 9 with contrast text for a solid tag, steps 2 / 7 / 11 for a subtle one.

Props

Name	Type	Default	Description	Version
`type`	`default \| primary \| accent \| info \| success \| warning \| error`	`default`	Color role.	Unreleased
`size`	`tiny \| small \| medium \| large`	`medium`	Height and text size.	Unreleased
`bordered`	`boolean`	`true`	Shows the border. Falls back to `ConfigProvider`’s `bordered`.	Unreleased
`round`	`boolean`	`false`	Pill shape.	Unreleased
`strong`	`boolean`	`false`	Bolder text.	Unreleased
`closable`	`boolean`	`false`	Adds a × button. Ignored when `checkable`.	Unreleased
`onClose`	`(event) => void`	`undefined`	Called when × is clicked.	Unreleased
`triggerClickOnClose`	`boolean`	`false`	Lets the × click also reach the tag’s `onClick`.	Unreleased
`checkable`	`boolean`	`false`	Makes the tag a toggle (`role="checkbox"`).	Unreleased
`checked`	`boolean`	`false`	Whether a checkable tag is on.	Unreleased
`onCheckedChange`	`(checked: boolean) => void`	`undefined`	Called with the next checked state.	Unreleased
`disabled`	`boolean`	`false`	Blocks closing and toggling.	Unreleased
`icon`	`ReactNode`	`undefined`	An icon before the label.	Unreleased
`color`	`{ color?, borderColor?, textColor? }`	`undefined`	Overrides the tag’s colors.	Unreleased

Tag also accepts native span attributes and a ref.

#Demos

#Type

#Size and shape

#Closable

#Checkable

#Icon

#Custom color

#Props