npm
Actions

Button

Contour, gold frame, material face. Five tones, three sizes.

<Button tone="accent" size="hero">PLAY</Button>
<Button tone="positive">CLAIM</Button>
<Button tone="gold" size="small" startGraphic={<Coin />}>€9.99</Button>
<Button tone="primary" width="wide">OPTIONS</Button>
<Button tone="accent" disabled>PLAY</Button>

Five material tones, three authored heights, and stable compact, standard, wide, or full-width geometry. Label length never resizes the button. Pressing sinks the face onto its bevel using transforms, so surrounding layout remains stable. Disabled and loading buttons retain native button semantics.