A compact label for categories, keywords, or filters. Optionally removable.
Design
<nana-tag variant="primary">Design</nana-tag>
npm install @nana-tec/ui-components
import "@nana-tec/ui-components/tag";
<nana-tag variant="primary">Design</nana-tag>
Primary
Success
Warning
Danger
Info
Neutral
<nana-tag variant="primary">Primary</nana-tag>
<nana-tag variant="success">Success</nana-tag>
<nana-tag variant="warning">Warning</nana-tag>
<nana-tag variant="danger">Danger</nana-tag>
<nana-tag variant="info">Info</nana-tag>
<nana-tag variant="neutral">Neutral</nana-tag>
Properties
| Property | Attribute | Type | Default | Description |
|---|
disabled | — | boolean | false | Disable the tag and its remove button. |
outline | — | boolean | false | Outline style with a transparent fill. |
removable | — | boolean | false | Show a remove button. |
shape | — | TagShape | 'rounded' | Corner shape. |
size | — | TagSize | 'md' | Tag size. |
variant | — | TagVariant | 'neutral' | Visual colour variant. |
Events
| Event | Description |
|---|
nana-remove | Emitted when the remove button is activated. |
Slots
| Slot | Description |
|---|
(default) | The tag's text content. |
CSS parts
| Part | Description |
|---|
::part(base) | The component's host container. |
::part(content) | The text content wrapper. |
::part(remove-button) | The remove button (when `removable`). |
CSS custom properties
| Property | Description |
|---|
--nana-tag-bg | Background colour. |
--nana-tag-color | Text colour. |
--nana-tag-border | Border colour. |
| Event | Type | Description |
|---|
nana-remove | CustomEvent | Emitted when the remove button is activated. |
| Slot | Description |
|---|
(default) | The tag’s text content. |
| Variable | Default | Description |
|---|
--nana-tag-bg | — | Background colour. |
--nana-tag-color | — | Text colour. |
--nana-tag-border | — | Border colour. |
| Part | Description |
|---|
base | The component’s host container |
content | The text content wrapper |
remove-button | The remove button (when removable) |
Explore Tag interactively Every state, prop, and edge case — with live controls — in Storybook.
View in Storybook
