Navigation

layout-badge

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

Attributes

Attribute	Values	Default	Description
`data-color`	`primary`, `success`, `warning`, `error`, `info`, `brand`, `secondary`, `accent`	neutral gray	Color scheme (semantic or theme-aware)
`data-variant`	`subtle`, `outlined`	solid	Visual style
`data-size`	`sm`, `lg`	medium	Badge size
`data-shape`	`square`	pill	Border radius style

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.