Button

A button triggers an event or action. It informs the visitor that something will happen next.

Buttons add visual prominence to the call to action and provide feedback on completed actions.

Buttons can:

  • Move visitors through a process: Submit, Next, Search, Save
  • Highlight a top task: Learn more, Get started, Join us, Visit
  • Reverse an action: Cancel, Previous, Reset, Delete
  • Pause a process: Save as draft

Sample

Available button colors are based on your selected color theme .

Primary action buttons

Secondary action buttons

Primary color Highlight color Standout color

Disabled buttons

Primary color Highlight color Standout color

Button sizes

large default small extra small

Primary action buttons

Secondary action buttons


  Primary color
  Highlight color
  Standout color

Disabled buttons


  Primary color
  Highlight color
  Standout color

Button sizes


  large
  default
  small
  extra small

Usage

When and how to use it

Use buttons to communicate actions users can take to interact with a page. Buttons should be used consistently for the same types of tasks.

A primary action button (filled in button) has the highest emphasis. Try to limit the number of primary action buttons on a page as they are distracting.

The secondary action button (outlined button) has a lower emphasis, but should still be used sparingly.

Buttons should be used to help people:

  • Submit a form
  • Begin a task
  • Make new elements appear on the page
  • Identify a new or next step in a process

Color alone does not convey the meaning of buttons. Be sure to match your button text with the meaning you are trying to communicate with color.

Keep in mind that not everyone will be able to see your button color, so the message should be clear without it.

How not to use it

Avoid using multiple buttons on a single page.

Avoid using disabled buttons as they can be inaccessible and confusing to some visitors. If you must use a disabled button, inform visitors why the button is disabled and how to enable it.

Accessibility

Standard accessibility review

Each time a new component version is published:

  • Test with the axe accessibility tool
  • Review with the VoiceOver or NVDA screen reader
  • Ensure all actionable elements are accessible by keyboard command and tab in a logical order
  • Check the component layout on a variety of screen sizes