A basic button triggers a single action in a task flow. We use three types of action button styles: primary, secondary, and tertiary. We use these in different combinations to guide users to continue and complete tasks.

Usage

Use action 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

Standard action 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

Three types of buttons

  • Height – 32 px
  • Border radius – 3 px
  • Side padding = 20 px

Primary-style buttons

  • 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.

Secondary-style buttons

  • 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

 

Tertiary-style buttons

  • 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.

Jumbo buttons

  • 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.

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

  • Use sentence case. It’s OK 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 instruction text is needed, use the verb “select.”
  • Recommended voice and tone attribute: straightforward
Launch Preview
x
px wide

Fixed

  • 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

Flexible

  • Label content (see content guidelines)
  • Button location, not relative to primary/secondary
  • Absolute width
  • Alignment relative to page
  • Was this Helpful?
  •