Buttons are interactive elements that users can select to trigger an action or navigate to another part of the application. They communicate what will happen when a user interacts with them, and are essential for enabling user interactions and guiding users through workflows.
Content
- Buttons should only have one action. Lead with a verb describing that action.
- You can include a noun to be more specific about the action, but it doesn't have to if the meaning is clear. For example: "Save"
Variants
Buttons come in five variants, each serving a distinct purpose in the interface hierarchy.
Primary — High-emphasis actions. The main CTA on a page.
Secondary — Medium-emphasis. Complements primary actions.
Tertiary — Low-emphasis underlined label for less prominent tasks.
Error — Destructive actions like delete or remove.
Text — Minimal link-style button for inline or de-emphasized actions.
States
Each button variant supports four interactive states that provide visual feedback to users.
Default — Resting state.
Hover — Pointer over the element.
Pressed — Active/click state.
Disabled — Non-interactive; action unavailable.
Anatomy
A button can be customized to include a label with a leading icon and a trailing icon.
Leading icons enhance titles by visually reinforcing their meaning and attracting user attention.
Trailing icons are used to show disclosure of further options.
Hierarchy
Establishing a clear hierarchy helps users understand the relative importance of different actions and guides them toward desired interactions.
Sizes
Depending on the importance of the action, the interface and the platform or device, there are multiple size buttons to fit each need.
Dos and don'ts
Use primary and secondary buttons together in a flow. Use the primary button for the main action or main functionality on the page.
Align the primary button to the right of the secondary button.
Don't use primary and tertiary buttons together in a flow. Tertiary buttons are reserved for less important tasks.
Reorganized tabs
With a priority unreviewed tab to know which releases to review first.
Allow button widths to adjust to fill the available space when it enhances usability and visual appeal.
Reorganized tabs
With a priority unreviewed tab to know which releases to review first.
Don't force buttons to fill the entire width if it compromises their clarity, accessibility, or intended hierarchy.