Variant 01
Icons
Add an icon before or after the label. Use an arrow for direction, and keep the label: the icon supports the text, it does not replace it.
View content
Components / atoms
Buttons
Buttons start actions. The primary, secondary and tertiary variants show which action matters most.
Usage
When to use it
Use one primary action for the main decision on a surface. Pair it with secondary actions for alternatives and tertiary actions for low-emphasis paths.
02 / examples
See the component in context.
Variant 02
Action hierarchy
Primary, secondary, and tertiary actions work together.
View content
Primary
Secondary
Tertiary
Variant 03
Modes and states
Hover, active, disabled, and loading states are explicit modes.
View content
Hover
Active
Focus
Disabled
Loading
03 / contract
Rules the component follows
A button starts an action, such as saving, sending or opening something. It comes in three variants that show how important an action is: primary for the main action on a surface, secondary for alternatives, and tertiary for low-emphasis actions. A button can carry an icon before or after its label, and the icon-only version always needs a text label for assistive technology.
Every button can be shown in several states: default, hover, active, focus, disabled and loading. The loading state prevents repeated clicks and tells assistive technology that the button is busy. The component renders a native HTML button, so keyboard and screen reader behaviour works without extra code.
04 / accessibility
Accessibility information
The focus outline is the same two-tone ring used across the system, so it is visible on any background, and the focus state in the documentation shows it without needing a keyboard. Disabled and loading buttons are never shown by colour alone: the label, the icon and the reduced emphasis change as well.
Every button has a text label so that its purpose is clear to everyone, and a button that shows only an icon must have an accessible name, which the icon button requires. When an action takes the person to another page instead of changing something on the current one, a link should be used instead of a button.