Badge & Label
Tiny inline markers. Badge — denser and bolder. Label — slightly roomier. Both share the same tone system.
Badge — subtle tones
default
info
success
warning
error
<span class="badge badge--success">New</span>Badge — solid + pill
info solid
success pill
warning
urgent
<span class="badge badge--success-solid badge--pill">Live</span>Badge — sizes & dot
small
default
large
<span class="badge badge--dot badge--success"></span>Label
default
info
success
warning
error
pill
<span class="label label--info label--pill">Info</span>Modifiers
| Class | Effect |
|---|---|
.badge / .label | Base markers. |
.{badge,label}--info / --success / --warning / --error | Subtle tone. |
.{badge,label}--info-solid / ...-solid | Solid tone. |
.{badge,label}--pill | Fully rounded. |
.{badge,label}--small / --large | Size variants. |
.badge--dot | Round 0.5rem dot. Compose with a tone class. |
.{badge,label}__icon | Leading SVG icon slot. |