Components
Badge
A badge is a label, and labels in this system are always uppercase with --tracking-caps. Fills are subtle — except the rating tones, which are solid because they carry data.
Primary
Neutral
Success
Warning
Destructive
Excellent
Fair
Poor
tone="action" is now tone="primary"; tone="danger" is now tone="destructive". A badge is never interactive — if it can be clicked it is a chip or a filter, and it is a different component.
Sporting Scouter Design System
Every token on this site is generated from
theme.css.