Components · Badge
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.