imitation
Tag
A short label or removable chip.
TagLabel and removable chip
DesignEngResearchOpsHarbour rebrandTideline mobile
DefaultInfoSuccessWarningError
In context
Task cardArea, project and due date as tags
Offline sync for tasks
EngTideline mobileDue 7 NovJW
Outlined small caps
TokensPadding, size, weight, tracking, case, fill and outline per tone: --rebar-tag-*.
This week
Props
| Prop | Type | Required | Default |
|---|---|---|---|
tone | TagTone | undefined | No | default |
closable | boolean | undefined | No | — |
onClose | (() => void) | undefined | No | — |
bionic | boolean | undefined | No | — |
bionicOptions | BionicOptions | undefined | No | — |
Accessibility
The close affordance is a real <button aria-label="Remove">: Tab to focus, Enter or Space to activate. The tone is colour only, so the label must carry the meaning.
data-rebar-* attributes
data-rebar-component="tag", data-rebar-tone, data-rebar-part="label" | "close".
Migrating to Ant Design
Not codemod-covered: AntD's Tag uses color (a preset name or hex) rather than a fixed tone union, so it is a semantic remap. closable/onClose map directly.