Button

Use buttons to communicate and trigger actions like submitting a form, canceling a process, or creating a new object.

Use buttons to communicate actions users can take. Each page should have only one Primary button and any remaining buttons should be represented as lower emphasis.

Do not use buttons as navigational elements. Instead, use a link or call to action when the desired action is to take users to a new page. Consider using a checkbox, switch, or control when you need to capture two togglable states.

Each button has a specific function and the design of each variant signals that function to users. Therefore, it is important that each variant is implemented consistently so they communicate the correct actions.

Use a Play button to indicate that audio or video will play when selected.

Use a Close button to indicate that a window will close when selected. Close buttons are mostly found in dialogs.

When adding icons, prefer to use the microns as they fit the button layout better.

To indicate that an action is currently unavailable or if a task needs to be completed first, most buttons can become disabled. However, the Play and Close buttons do not include a disabled state.

Button text labels express what action will occur when users interact with it. When writing button labels, be specific and clearly communicate the action by doing the following:

• Make sure button text is unique and easily understood for when screen readers announce button text to users
• Use simple verbs or verb phrases
• Aim for short labels when possible
• Try not to use articles (for example, write Add source instead of Add a source)
• Do not use punctuation
• Use an icon within a button to add attention or clarify the action
• Do not create icons within buttons by using typed symbols (for example, a plus)

When writing link button text labels, use specific and action-focused language that matches what users will see when they arrive at their location.

Button text labels are written to be short and communicate an action whereas call to action text labels are written to entice users to select a link.

Buttons in dialogs, forms, etc. should always be left aligned in the container. This solves for the following:

• Modularity and flexibility - a standard alignment creates consistency in how objects appear
• Accessibility - buttons in a form are on the same scan line as the fields which benefits low vision users Users who are blind can easily navigate form submit buttons because the order is consistent across all contexts
• Responsiveness - the most important actions are encountered first when elements are stacked vertically

Buttons are ordered by hierarchy from left to right. Do not use multiple Danger, Primary, or Close buttons in the same area.

Grouping buttons is a useful way of aligning buttons that have a relationship. Group buttons logically into sets based on hierarchy and usage.

The standard spacing between each button is 16px, even for Danger buttons. If buttons are stacked, the spacing between each button should be 8px.

Keep the button’s text on one line.

Do not use more than one line of text.

Use one primary or primary danger button per button group.

Do not use multiple primary or primary danger buttons in the same button group.

Label buttons clearly and succinctly.

Do not write button text labels that are expressive or ambiguous.

Use a danger button for destructive actions only.

Do not use a danger button for non-destructive actions.

Use buttons for actions, and retain the primary button styling to make them look different from calls to action.

Do not use buttons as links or change the style of a primary button to look more like a call to action.

Use only one icon in a button.

Do not use more than one icon in a button.