Tag
tagLabels content with semantic color, optional icon, and close action.
Usage
Tone color
tone covers state spectrum: neutral / brand / success / warning / danger.
<>
<Tag>Default</Tag>
<Tag tone="brand">Processing</Tag>
<Tag tone="success">Success</Tag>
<Tag tone="warning">Warning</Tag>
<Tag tone="danger">Error</Tag>
</>Variants
variant provides soft (default light background) / solid background / outline stroke.
<>
<Tag variant="soft" tone="brand">soft</Tag>
<Tag variant="solid" tone="brand">solid</Tag>
<Tag variant="outline" tone="brand">outline</Tag>
</>Status Dot
dot leading status point; pulse lets the point breathe and flash to express the ongoing status.
<>
<Tag dot tone="success">Running</Tag>
<Tag dot pulse tone="brand">Deploying</Tag>
<Tag dot pulse tone="warning">Retrying</Tag>
</>With icon
icon slot puts the leading icon (dot is not rendered when it exists).
<>
<Tag tone="success" icon={<CircleCheck />}>Passed</Tag>
<Tag tone="danger" icon={<CircleX />}>Rejected</Tag>
</>Dismissible
Pass onClose to render the close button. Click to trigger the callback to remove the label by the caller.
<Tag tone="brand" onClose={() => remove(tag)}>
Removable
</Tag>When to use
Use Tag for a compact read-only state or category such as running, pending review, or rejected. Use [[Badge]] for counts or Chip for removable filter tokens.
Import
import { Tag, tagVariants } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| variant | "soft" | "solid" | "outline" | "soft" | Visual style. See Surface recipes for the fill and text colour of each step. |
| tone | "neutral" | "brand" | "info" | "success" | "warning" | "danger" | "neutral" | Semantic tone. Same value set as Alert. |
| size | "sm" | "md" | "md" | Size. |
| dot | boolean | false | Leading tone-colored dot. |
| pulse | boolean | false | Dot breathing animation, effective only with dot. |
| isDisabled | boolean | false | Lowers opacity and disables pointer actions. |
| className | string | - | Root class. |
| …HTMLAttributes | HTMLAttributes<HTMLSpanElement> | - | Native span attributes are forwarded. Status tags commonly need title to reveal the full value on hover (a cell showing "Word" whose title is the complete MIME type), plus data-testid and aria-*. |
Events
| Event | Type | Description |
|---|---|---|
| onClose | () => void | Adds a close button and reports activation. |
Slots
| Slot | Type | Description |
|---|---|---|
| icon | ReactNode | Leading icon, taking precedence over dot. |
| children | ReactNode | Tag text. |
Surface recipes
When you build a semantic highlight of your own (not a Tag, not an Alert, just a block you assemble), follow this table. It is the recipe this component uses internally:
| Step | Fill | Text |
|---|---|---|
| solid | bg-warning | text-warning-foreground |
| soft | bg-warning-subtle (or bg-warning/12) | text-warning |
| outline | border-warning | text-warning |
`-foreground` only matches a solid fill: in light mode it is plain white. Reaching for text-warning-foreground on a tint by naming intuition gives you white on white and the text disappears, while dark mode looks right, because -foreground is near-black there, so whoever develops in dark mode never sees it. On a tint the text colour is always the semantic colour itself.
Usage notes
- `brand` and `info` are not the same thing (#232).
brandis the primary color and means "this relates to the product or the primary action";infouses its own info color and means "this is a neutral statement of fact, just read it". Reach forinfowhen a tag states which mode something is in, neither a success nor a warning.brandmakes an unclickable tag compete with the primary call to action, whileneutralblends into every other grey tag on the screen. The two were literally the same color before tokens 0.8.0 added--color-info; see the same history in Alert. - Pulse requires dot. Icon and dot are mutually exclusive, with icon winning.
- Closing is controlled by the parent; filter the item from state.
- The close control's accessible label follows
ConfigProvider:zhCNuses"\u79fb\u9664"andenUSuses “Remove”. Legacy custom locales withoutcomponents.tagkeep the Chinese fallback.
Related
Sparkline · ImageViewer · LiveProductCard · DiffStat · ScoreRing · Badge
Playground
<Tag dot>Status Label</Tag>