Loading page
Ctrl K
Ready
Every badge treatment across the complete semantic colour system.
Soft
Low emphasis labels
Solid
High emphasis status
Outline
Neutral surfaces
Gradient
Promotional emphasis
Compact service, workflow and presence states with readable labels.
Three sizes with pill and rounded-rectangle geometry.
Pill
Rounded
Leading, trailing and numeric badges keep every glyph optically centred.
A keyboard-accessible segmented filter built from interactive badge buttons.
Showing all records.
Dismiss individual tags and restore the full example without leaving empty space.