Tag
A labeled chip with optional native-button removal; collection state remains app-owned.@gemologic/sheen · data displayPlayground
In review
<Tag label="In review" tone="info" disabled={false} size="sm" tone="neutral" variant="soft"/>Variant matrix
Tag example
In review
tone: neutral
In review
tone: accent
In review
tone: info
In review
tone: success
In review
tone: warning
In review
tone: danger
In review
tone: market-up
In review
tone: market-down
In review
tone: market-flat
In review
variant: soft
In review
variant: solid
In review
variant: outline
In review
size: sm
In review
size: md
In review
Anatomy
- Package
@gemologic/sheen- Source
packages/ui/src/primitives/Status.tsx- Tokens
--sheen-text-caption-size--sheen-color-success-fg--sheen-color-success-subtle
Accessibility
Role: label with optional removal buttonKeyboard: Tab, Enter, SpaceDo
- Use visible text as well as color to communicate meaning.
Do not
- Do not remove a focused tag without moving focus to a surviving control.
Generated props
| Name | Type | Default | Description |
|---|---|---|---|
label * | string | — | Plain-text tag identity, also used by the default accessible remove label. |
onRemove | () => void | — | App-owned removal callback. The app updates the collection and restores focus if the tag disappears. |
removeLabel | string | — | Override the accessible remove-button name; defaults to the localized remove message plus label. |
disabled | boolean | false | Disables removal without hiding the tag. |
tone | StatusTone | neutral | Semantic status or market role, independent of the selected accent. |
variant | "soft" | "solid" | "outline" | soft | Soft fill, solid fill, or outline treatment. |
size | "sm" | "md" | sm | Density-aware label size. |