A basic button triggers a single action in a task flow. We use three types of button styles: primary, secondary, and tertiary. We use these in different combinations to guide users to continue and complete tasks.
Use basic buttons to:
- Submit a form or mark the completion of a task (Send, Save, Done).
- Indicate the next step in a multi-step process (Review, Next, Buy it now).
- Create a new entity (Create a project, Create a new customer, Create a new employee, Create a new report).
Appearance and behavior
Basic buttons come in three style types: primary, secondary, and tertiary.
Each standard type uses the same specs (for interactions, size, shape, spacing) but has a different color scheme.
Basic buttons specs
- Height – 32 px
- Border radius – 3 px
- Side padding = 20 px
- Use the primary button style for the most prominent call to action on the page.
- These buttons guide users to and through the main happy path in a task flow.
- Use the secondary button style for buttons that offer users additional action they can take in their task flow (examples: Cancel, Back).
- You can have only one primary-styled button on a screen, but you can have more than one secondary-styled button. If you need to offer more than one alternate action, consider using text links instead of multiple secondary buttons.
Secondary-style buttons in product
Secondary-style buttons in marketing
- Use these tertiary style buttons on marketing screens only.
- You can use these buttons with primary and secondary button styles.
- Don’t use in product. In product screens, if you need to offer users additional actions in a flow, use a text link instead.
- Use only in marketing as an extra-large primary button for an important action.
- Never place a jumbo button in a trowser’s sticky footer.
- Only one jumbo button can exist on a page or screen.
Touch targets should be visually identifiable. Is it clear what to do next? See accessibility guidelines
Placing buttons in a flow
- Primary-styled button – right-aligned.
- Secondary-styled button – left-aligned.
- When three actions are present, right-align primary, snug up the secondary right there next to the primary, and then throw the tertiary text link over on the left somewhere, or anywhere else that feels less prominent.
Content guidelines for basic buttons
- Be straightforward.
- Use sentence case. It’s okay to use title case for proper nouns (Brad Smith), branded products (QuickBooks ProAdvisor), and official things like Board of Equalization.
- Don’t use punctuation.
- Start with an action verb.
- Keep it short. Two words is optimal (verb + noun = Create project / Start now / Send email).
- Describe what actually happens when people use the button. Avoid Next or Continue when a more specific word will do (Send, Start, Sign up). Never say Submit.
- Never write “click here.” If instructional text is needed, use the verb “select.”
- Minimum width (100 px)
- Button colors
- Button hierarchy should be consistent
- Button positioning
- Font specs: font face, size, weight, capitalization
- Corner radius
- Tap target Size
- States: disabled, default, hover, active, focused
- Basic text commands
- Label content (see content guidelines)
- Button location, not relative to primary/secondary
- Absolute width
- Alignment relative to page