Actions
Buttons
Primary, outline and large buttons. Each direction restyles them; markup never changes.
Source: styles/components.css (.btn)
Live
Art Deco
Sunrise
Usage
DoOne primary button per view: Join FAD, Take action, Register.
Don’tTwo primary buttons side by side.
DoUse a link (<a>) for navigation and a <button> for actions.
Don’tA button that only navigates.
Accessibility
- Minimum 48 px tall.
- Label says what happens, in a verb.
- Focus ring is 3 px and never removed.
- Disabled state also changes its label or is explained, never color alone.
Props
| Name | Type | Note |
|---|---|---|
| className | btn | btn--primary | btn--outline | btn--lg | Variants compose: btn btn--primary btn--lg. |