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

Colors

Semantic Colors

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

Theme Colors

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

When to use which?

  • 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

Variants

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

Sizes

Three sizes available for different contexts.

Usage Examples

Status Indicators

Notification Count

Tag List

Related
↑