Buttons
The button starts an action. There are four variants by how important the action is, three sizes and five states. Everything comes from tokens: action colors, spaces, radius md and label-button styles.
Variants
One main action per view (Primary). Secondary for other actions, Tertiary for low-weight actions and Destructive only to delete or cancel something that cannot be undone.
Sizes
sm (32 px) for tables and dense bars, md (40 px) by default, lg (48 px) for covers and calls to action. The text uses label-button-sm/md/lg.
States
Default, Hover, Focus (color-focus-ring ring of 2 px with a 2 px white gap), Pressed and Disabled (color-disabled-bg and color-disabled-text). The focus always shows when browsing with a keyboard.
Tokens
Values linked in the component.
Contrast
Button text on its background. All active pairs pass AA (4.5:1). Disabled is not required by WCAG, but it also reaches 4.62.