Button
Design.mdChanged from stock (Design.md §3.0, §3.1): our colours, sizes 48/40/32/24 with radii 12/10/8/6 from component tokens, Figtree Bold labels (font-button-*), Medium 40 as the default, a 2px Primary focus outline 2px outside, explicit disabled colours, and data-variant / data-size for brand.css. Variants map to Design.md: default = Filled Primary, secondary = Lighter Primary (SecondaryPrimary), outline = Stroke Neutral, stroke = Stroke Primary, destructive = Filled Danger, destructive-secondary = Lighter Danger (SecondaryDanger).
npx shadcn@latest add @su/buttonComponent tokens:--button-gap--button-height-lg--button-height-md--button-height-sm--button-height-xs--button-padding-lg--button-padding-md--button-padding-sm--button-padding-xs--button-radius-lg--button-radius-md--button-radius-sm--button-radius-xsVariants × sizes
Medium 40 is the default for every button (Design.md §3.1). Large, Small and XS only where a brief names them.
| size="lg" | size="default" | size="sm" | size="xs" | |
|---|---|---|---|---|
| default | ||||
| secondary | ||||
| outline | ||||
| stroke | ||||
| ghost | ||||
| destructive | ||||
| destructive-secondary | ||||
| link |
States
Press Tab to see the focus outline: 2px Primary, 2px outside, keyboard only (§3.0).
Footer pairs
Dismiss first, confirm last. The secondary follows the primary: SecondaryDanger beside Danger.