Tag
stable 0.7 kB<hk-tag>A compact label with a tone, an optional icon and a remove button that actually removes. Tones pair an icon with the colour so meaning survives colour blindness.
#chip#badge
Live demo
Running in this page — interact with it.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| tone | 'neutral' | 'success' | 'warning' | 'danger' | 'info' | 'neutral' | Colour scheme. |
| icon | string | '' | Leading icon class. |
| removable | boolean | false | Shows the remove button. |
| size | 'sm' | 'md' | 'md' | Scale. |
Outputs
removedEventEmitter<void>Emits when the remove button is pressed.
Keyboard
- Tab Reaches the remove button
- Enter / Space Removes the tag
Theming
Component tokens, each falling back to a global one:
| Property | Default | Controls |
|---|---|---|
| --hk-tag-radius | 999px | Corner radius. |
| --hk-tag-success-bg | #ecfdf5 | Success fill. |
| --hk-tag-danger-bg | #fef2f2 | Danger fill. |
Accessibility
- The remove button has its own accessible name including the tag text, so "remove canary" is announced rather than "button".
- Tone is conveyed by icon and text as well as colour.