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>
| Property | Type | Default | Description |
|---|
variant | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral' | 'neutral' | Visual colour variant. |
size | 'sm' | 'md' | 'lg' | 'md' | Tag size. |
shape | 'rounded' | 'pill' | 'square' | 'rounded' | Corner shape. |
outline | boolean | false | Outline style with a transparent fill. |
removable | boolean | false | Show a remove button. |
disabled | boolean | false | Disable the tag and its remove button. |
| 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
