DisplayBrowse display components
Badge
Small status indicator with semantic colors, soft, outline, and dot variants.
Live preview
PrimaryActiveReviewFailedSoftOutline
Usage
Adapters:React stableVue stable
index.html
<span class="lm-badge lm-badge-success lm-badge-dot">Active</span>
<span class="lm-badge lm-badge-soft">12 new</span>CSS classes (6)
| Class | Description |
|---|---|
lm-badge | Base pill |
lm-badge-{variant} | primary | secondary | accent | success | warning | danger | info |
lm-badge-soft | Muted primary tint |
lm-badge-outline | Transparent with stronger border |
lm-badge-dot | Adds a leading colored dot |
lm-badge-{size} | sm | md | lg |
React props (3)
| Prop | Type | Default | Description |
|---|---|---|---|
variant | Variant | default | Color scheme |
tone | solid | soft | outline | solid | Surface treatment |
dot | boolean | — | Show leading dot |
Accessibility
- Always pair color with text — color alone fails A11y.
- Wrap in role='status' for live regions when content changes.
Spotted something wrong? Edit this entry on GitHub.