Badge
Polished tags for status chips, feature flags, or inline metadata. Choose from semantic variants, tone styles, pill toggles, and optional icons to match your interface vocabulary.
Core Variants
Semantic presets cover common states like primary, success, warning, error, info, plus a neutral and highlight gradient.
Impactful chips
Tone & Icon Mix
Swap between :solid, :soft, or
:outline
tones and add icons for richer semantics.
Flexible system
Soft tone with icons
Outline + gradient highlight
Sizes & Shape
Three size presets and a pill
toggle for squared corners.
Responsive chips
Props
Badges stay simple to wire while offering the controls designers need: semantics, tone, iconography, and layout toggles.
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | atom | :neutral | Semantic palette (:primary, :success, :warning, :error, :info, :highlight). |
| tone | :solid | :soft | :outline | :solid | Controls fill style and border treatment. |
| size | :sm | :md | :lg | :md | Pad and scale typography + icon sizing. |
| pill | boolean | true | Toggle full-rounded corners for pill silhouette. |
| icon | string | nil | nil | Optional icon rendered before the label. |
| class | string | "" | Extra classes for layout adjustments. |