Badge

Design.md

Changed from stock (Design.md §3.3): a status tag. Three styles (Lighter, Filled, Stroke) in any colour family, three sizes (20 r6, 24 r8, 32 r8). The colour comes from the family's semantic tokens through --badge-* variables, so Dark and a brand override need nothing here.

npx shadcn@latest add @su/badgeComponent tokens:--badge-filled--badge-height-lg--badge-height-md--badge-height-sm--badge-lighter--badge-on-filled--badge-radius-lg--badge-radius-md--badge-radius-sm--badge-stroke--badge-text--content-neutral-on-filled--content-neutral-primary--stroke-neutral-strong--surface-neutral-filled--surface-neutral-subtle

Styles × colour families

Lighter, Filled and Stroke in every family (§1.5, §3.3). Status columns use Lighter.

lighterfilledstrokeneutralDraftDraftDraftprimaryLabelLabelLabelsecondaryLabelLabelLabelsuccessLabelLabelLabelwarningLabelLabelLabeldangerLabelLabelLabelinfoLabelLabelLabelaccent-1LabelLabelLabelaccent-2LabelLabelLabelaccent-3LabelLabelLabelaccent-4LabelLabelLabelaccent-5LabelLabelLabelaccent-6LabelLabelLabelaccent-7LabelLabelLabelaccent-8LabelLabelLabelaccent-9LabelLabelLabel

Sizes

Small 20 (radius 6), Medium 24 (radius 8, the default), Large 32 (radius 8).

AttendedAttendedAttended