Navigation

layout-badge

Small status indicators, labels, and counts. Perfect for tags, statuses, and notification counts.

Attributes

Attribute	Values	Default	Description
`data-size`	`sm`, `lg`	—	Size: sm or lg (default medium).
`data-color`	`primary`, `success`, `warning`, `error`, `info`, `brand`, `secondary`, `accent`	—	Semantic or brand color.
`data-variant`	`subtle`, `outlined`	—	subtle (tinted) or outlined instead of filled.
`data-shape`	`square`	—	square corners instead of a pill.

Use semantic colors for status indicators that convey specific meaning. These colors remain consistent regardless of theme.

Use theme colors for decorative purposes like tags, labels, and categories. These colors adapt to the site's brand hues.

Semantic colors - Status indicators (success/error), system messages, anything where color conveys meaning
Theme colors - Tags, labels, categories, decorative badges where color is for visual variety

Choose between solid (default), subtle, or outlined styles.

Three sizes available for different contexts.