Button
An intent (what the action means) at an emphasis (how much it weighs), at a size (where it sits).
Playground
Installation
Default
No props: neutral/raised.
Intent and emphasis
The five pairs. Pairs, below, says when each one fits.
Sizes
32 / 36 / 40 / 44px, the field heights.
With icon
data-icon='inline-start' or 'inline-end' tightens the padding on that side.
Icon only
The icon sizes match the text sizes. aria-label names the action.
As link
render swaps the element, e.g. for a router link.
Open
aria-expanded while the menu it opens is open.
Pressed
Ghost + aria-pressed, in a muted toolbar.
Pending
isLoading: the label keeps the width; the spinner shows at least 800ms. The last one resolves after 150ms and still never flashes.