CAS Design System

STYLES

Three visual treatments

Badges come in three different styles: Strong, Fill, and Border.

Badgestrong

Badgefill

Badgeborder

COLORS

Eight supported colors

Badges share the same semantic color roles as buttons: Primary, Secondary, Danger, Success, Warning, Information, Neutral, and Inverse — each with a strong, fill, and border treatment.

Badgeprimary

Badgesecondary

Badgedanger

Badgesuccess

Badgewarning

Badgeinformation

Badgeneutral

Badgeinverse

SIZE

Two fixed heights

Badgemedium14 px text

Badgesmall12 px text

TOKENS & TYPOGRAPHY

Implementation bindings

Primarycolor/action/primary/{base, lighter, light}

Secondarycolor/action/secondary/{base, lighter, light}

Dangercolor/feedback/error/{dark, lighter, light}

Successcolor/feedback/success/{dark, lighter, light}

Warningcolor/feedback/warning/{dark, lighter, light}

Informationcolor/feedback/info/{dark, lighter, light}

LabelNunito Sans · 14 px (Medium) / 12 px (Small) · ExtraBold 800

Corner radiusradius/6 · 6 px

COMPONENT STRUCTURE

01Label · Editable text

02Size · Medium (14 px text), Small (12 px text)

03Style · Strong (solid), Fill (soft), Border (soft + stroke)

04Color · Primary, Secondary, Danger, Success, Warning, Information, Neutral, Inverse

05Leading icon · Boolean + instance swap, independent of trailing

06Trailing icon · Boolean + instance swap, independent of leading