A small status indicator label with clean, modern design.
New
<nana-badge variant="primary">New</nana-badge>
npm install @nana-tec/ui-components
import "@nana-tec/ui-components/badge";
<nana-badge variant="primary">New</nana-badge>
Primary
Success
Warning
Danger
Info
Neutral
<nana-badge variant="primary">Primary</nana-badge>
<nana-badge variant="success">Success</nana-badge>
<nana-badge variant="warning">Warning</nana-badge>
<nana-badge variant="danger">Danger</nana-badge>
<nana-badge variant="info">Info</nana-badge>
<nana-badge variant="neutral">Neutral</nana-badge>
Properties
| Property | Attribute | Type | Default | Description |
|---|
capsule | — | boolean | false | Capsule shape instead of fully rounded |
dot | — | boolean | false | Show a dot indicator before the text |
interactive | — | boolean | false | Makes badge interactive with hover/focus states |
outline | — | boolean | false | Outline style with transparent background |
pulse | — | boolean | false | Pulse animation for the dot (only when dot is true) |
removable | — | boolean | false | Removable badge with close button |
size | — | BadgeSize | 'md' | Size of the badge |
variant | — | BadgeVariant | 'neutral' | Visual style variant |
Events
Slots
| Slot | Description |
|---|
(default) | Badge text content |
CSS custom properties
| Property | Description |
|---|
--nana-badge-bg | Custom background color |
--nana-badge-color | Custom text color |
--nana-badge-border | Custom border color |
| Event | Type | Description |
|---|
remove | CustomEvent | — |
| Slot | Description |
|---|
(default) | Badge text content |
| Variable | Default | Description |
|---|
--nana-badge-bg | — | Custom background color |
--nana-badge-color | — | Custom text color |
--nana-badge-border | — | Custom border color |
| Part | Description |
|---|
badge | The badge label |
remove-button | The remove button (when removable) |
Explore Badge interactively Every state, prop, and edge case — with live controls — in Storybook.
View in Storybook
