Buttons allow a user to take an action.

  1. Call to Action
  2. Container
  3. Icon

There are four types of buttons – icon only, basic, leading icon and trailing icon.


Button has five core action types – primary, secondary, info, contrast and destructive.

Button action types

Action types offer five distinct styles to be used in different scenarios:

  • Primary - typically used for the most important functional calls to action in data-driven applications and sites.
  • Secondary - typically used for ancillary calls to action.
  • Info - typically used for the most important informational calls to action in content-driven applications and sites.
  • Contrast - typically used for calls to action that are overlaid on imagery or dark backgrounds.
  • Destructive - should be used sparingly and only for actions that are destructive and permanent including deletion or removal.

All button types have three levels of emphasis available — bold, subtle and minimal. Bolder emphasis will help to bring more attention to a button.

Button Emphasis

Buttons can be built with a square or circle shape. The square shape maintains 2 pixel rounded corners.


Button status helps to provide feedback to the user after clicking or tapping on a button. In a happy path, the user will progress from the loading status to the success status and then return to the enabled state. In an error scenario, the user will progress from the loading status to the error status and should be shown messaging to alert them as to what went wrong and how to move forward.

Button Status

For each button action type and emphasis style there are five button states — enabled, hover, active, focus and disabled.

Button States Primary
Button States Secondary
Button States Info
Button States Contrast
Button States Desctructive

Buttons can be displayed in extra large, large, medium and small sizes.


By default, the width of a button should be defined by the length of the text. Alternatively, a button can be set to a custom fixed width in order to maintain a consistent look across a page design.

  • Important buttons should be immediately visible to the user without scrolling.
  • Reference the Writing guidelines when writing calls to action.
button action do

DO: Use emphasis to make a button appear less important than an adjacent button.

buttons emphasis do

DO: Use minimal emphasis for icon only buttons that are paired with a bold button for the main action.

button action dont

DON'T: Don’t use the destructive action type for actions that are not permanently destructive. It is a strong color and may appear as more important than it is meant to be.

buttons emphasis dont

DON'T: Don’t use primary and info styles for adjacent buttons. They are both strong styles that are not meant to be placed side-by-side.

button guidance

DO: Only use one primary styled button when several buttons are adjacent to each other in the same container.

buttons guidance

DON'T: Use multiple primary styled buttons when several buttons are adjacent to each other in the same container.

Many custom interactions can be built using buttons.

Button can be paired with Text or Label to create a clickable anchor link for sections on a page.

Button anchor

Floating action buttons are typically icon-only buttons that can be used for items like back to top or menu buttons.

Button FAB 1
Button FAB 2

Social share buttons can be setup as a clickable toggle that exposes a custom menu or a popover menu that appears on hover.

Social Share buttons