Tag
tagLabels content with semantic color, optional icon, and close action.
Usage
Tone color
tone covers state spectrum: neutral / brand / success / warning / danger.
DefaultProcessingSuccessWarningError
tsx
<>
<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.
softsolidoutline
tsx
<>
<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.
RunningDeployingRetrying
tsx
<>
<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).
PassedRejected
tsx
<>
<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.
Removable
tsx
<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
ts
import { Tag, tagVariants } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| variant | "soft" | "solid" | "outline" | "soft" | Visual style. |
| tone | "neutral" | "brand" | "success" | "warning" | "danger" | "neutral" | Semantic tone. |
| 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. |
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. |
Usage notes
- 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
Status Label
<Tag dot>Status Label</Tag>