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.

Default Primary Success Warning Error Info
<layout-badge>Default</layout-badge> <layout-badge data-color="primary">Primary</layout-badge> <layout-badge data-color="success">Success</layout-badge> <layout-badge data-color="warning">Warning</layout-badge> <layout-badge data-color="error">Error</layout-badge> <layout-badge data-color="info">Info</layout-badge>

Theme Colors

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

Brand Secondary Accent
<layout-badge data-color="brand">Brand</layout-badge> <layout-badge data-color="secondary">Secondary</layout-badge> <layout-badge data-color="accent">Accent</layout-badge>

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.

Solid (default)

Solid Solid Solid

Subtle

Subtle Subtle Subtle

Outlined

Outlined Outlined Outlined

Code

<layout-badge data-variant="subtle" data-color="success">Subtle</layout-badge> <layout-badge data-variant="outlined" data-color="error">Outlined</layout-badge>

Sizes

Three sizes available for different contexts.

Small Medium Large

Code

<layout-badge data-size="sm">Small</layout-badge> <layout-badge>Medium</layout-badge> <layout-badge data-size="lg">Large</layout-badge>

Usage Examples

Status Indicators

Order Status: Completed Payment: Pending Subscription: Expired

Notification Count

Messages 3 Notifications 12

Tag List

CSS HTML JavaScript Web Components

Related Elements