Playground
Badge
ui
control
Small label for categories, tags, or status indicators
Visual markers for content classification
import { Badge } from "@everydayos/ui";Usage
Neutral and accent badge variants
Neutral
Default
Secondary
Outline
Accent
Emerald
Sky
Marigold
Destructive
API
variantdefaultdefaultsecondaryoutlinedestructiveemeraldskymarigold
defaultpreferredrare
Examples
Badges in Context
Badges on cards for status and categorization
Air^ Indoor
Active
Living room — 22°C
Heating
Auto
Air^ Outdoor
Standby
External unit — 8°C
Eco mode
Scheduled
Composition
Pairs well with
Stack
Inline
Heading
When to avoid
- Need clickable action — use Button instead
- Need large prominent label — use Heading instead