Badge

A compact status indicator for labels, tags, and state feedback. Features clean variants, outline mode, sizing, dot indicators, and advanced interactions.

Variants

Neutral

Primary

Success

Warning

Danger

Info

variants.html

html

1	<nana-badge>Neutral</nana-badge>
2	<nana-badge variant="primary">Primary</nana-badge>
3	<nana-badge variant="success">Success</nana-badge>
4	<nana-badge variant="warning">Warning</nana-badge>
5	<nana-badge variant="danger">Danger</nana-badge>
6	<nana-badge variant="info">Info</nana-badge>

Outline Style

Neutral

Primary

Success

Warning

Danger

Info

outline.html

html

1	<nana-badge outline>Neutral</nana-badge>
2	<nana-badge variant="primary" outline>Primary</nana-badge>
3	<nana-badge variant="success" outline>Success</nana-badge>
4	<nana-badge variant="warning" outline>Warning</nana-badge>
5	<nana-badge variant="danger" outline>Danger</nana-badge>
6	<nana-badge variant="info" outline>Info</nana-badge>

Sizes

Small

Medium

Large

sizes.html

html

1	<nana-badge size="sm">Small</nana-badge>
2	<nana-badge size="md">Medium</nana-badge>
3	<nana-badge size="lg">Large</nana-badge>

Dot Indicator

Active

Online

Away

Offline

dot.html

html

1	<nana-badge dot>Active</nana-badge>
2	<nana-badge dot variant="success">Online</nana-badge>
3	<nana-badge dot variant="warning">Away</nana-badge>
4	<nana-badge dot variant="danger">Offline</nana-badge>

Advanced Features

Interactive

Live

Customization

Pick a variant; to brand a custom tag, override the three colour variables.

Beta

badge.css

css

1	/* Variants cover the common statuses; override colours for custom tags */
2	nana-badge.beta {
3	--nana-badge-bg: #eef2ff;
4	--nana-badge-color: #3730a3;
5	--nana-badge-border: #c7d2fe;
6	}

CSS Variable	Description
`--nana-badge-bg`	Background colour
`--nana-badge-color`	Text colour
`--nana-badge-border`	Border colour

Part	Description
`badge`	The badge box
`remove-button`	The remove (×) button

Props

Attribute	Type	Default	Description
`variant`	`neutral \| primary \| success \| warning \| danger \| info`	`neutral`	Color variant
`size`	`sm \| md \| lg`	`md`	Badge size
`outline`	`boolean`	`false`	Transparent background with border
`dot`	`boolean`	`false`	Shows colored dot indicator
`pulse`	`boolean`	`false`	Pulsing animation (with dot)
`interactive`	`boolean`	`false`	Enables hover and focus states
`capsule`	`boolean`	`false`	Slightly squared border radius
`removable`	`boolean`	`false`	Shows remove button with 'remove' event

Slots

Slot	Description
(default)	Badge text content

1	<nana-badge variant="primary" interactive>Interactive</nana-badge>
2	<nana-badge variant="success" dot pulse>Live</nana-badge>
3	<nana-badge variant="neutral" capsule>Category</nana-badge>
4	<nana-badge variant="danger" removable>Removable</nana-badge>