Button
Trigger an action, such as submitting a form or opening a dialog.
Variants
Use the default variant for the single most important action on a view.
Compact
Inside rows, frame headers, and footers, use size="sm": 28px with a 14px label and 14px icons, the compact step of the control ladder.
Sizes
Controls sit on one ladder: 28px compact and 36px default, shared with inputs, selects, and menu rows. 40 and 48px are for page headers and marketing moments.
States
Pass status while an action runs: loading spins, then success or error shows for a moment before it returns to idle. The label holds its place, so the button never changes width, and it takes no clicks until it's idle. Disabled means the action isn't available, not that it's busy. Try the last Save; every other press fails.
Prefix and Suffix
Add an icon before or after the label. Icon-only buttons need an aria-label.
Disabled
Use the present participle with an ellipsis while an action is in progress.