Badge
Last updated: October 14, 2026
Compact labels, tags, and presence dots for status and metadata.
Installation
npx smoothui-cli add badgeFeatures
- Variants: default, secondary, outline, destructive, success, warning
- Sizes:
smandmd StatusDotfor online / away / busy / offline with optional pulse- SmoothUI-owned — no Base UI / Radix twin required
States
Features
Mixed variants for labels and filter chips.
Sizes
Compact sm next to default md.
Status
Presence dots with optional pulse on online.
Accessibility
ARIA Attributes
| Attribute | Element | Purpose |
|---|---|---|
role="status" | StatusDot | Announces presence state |
aria-label | StatusDot | Status name (online, busy, …) |
Reduced Motion
StatusDot pulse disables when prefers-reduced-motion is set.
Props
© 2026 SmoothUI. Built by Eduardo Calvo.