Support component
Button
Primary, secondary and light calls to action.
Live preview
Light background shown; verify against a tinted or dark surface where the component is used that way in course.
Use when / avoid when
Use when
- A single clear action per area — one primary action, optionally one secondary.
Avoid when
- Never use vague labels such as “Click here” — label the destination or outcome.
Anatomy
- Label text
- Optional icon (aria-hidden)
Variants
States
Responsive behaviour
Full-width on narrow screens where it is the primary action in a stacked layout.
Accessibility
- Use a real