Buttons

Buttons provide the user with a clear way to perform an action. Buttons should be labelled clearly and in Title Case (Ex. "Sign Up").

Variants

There are three levels of buttons that can be used to modulate the prominence of various actions.

Primary

Primary buttons are used for the default or most likely action the user will take on a particular screen or card.

Secondary

Secondary buttons should be used for alternate tasks the user may take on a given screen or card. They are still clearly buttons, but less prominent than the primary action.

Tertiary

Text Only buttons are used when an actual button shape is not desirable and the action is of lesser importance. They are useful as tertiary navigation in a title bar or other component with limited vertical space. If the Text Only button is used on anything other than a white background ensure the contrast ration is at least 4.5:1

Sizes

To address space and prominence issues, buttons can be one of three sizes. Medium buttons are the default size, and should be used unless there is a compelling reason to choose another size.

Small

Small buttons are used when space is severely limited, such as in toolbars or other interface elements that need to include a lot of functionality in a very limited space. Because the hit area is small, they are not ideal for interactions that will be primarily accomplished on touch devices.

Large

Large buttons can be used when there is a single extremely important call to action on a screen that will result in task failure if the user doesn't notice it. Use sparingly.

Layouts

Text Only

Text Only Buttons are the default state and should be used unless there is a compelling reason to choose another option.

Leading Icon

Icon Left buttons are used when an action label can be clarified with a small illustration.

Trailing Icon

Icon Right buttons are often used when there is a directional cue that needs to direct the user's attention to the right.

Icon Only

Icon Only buttons are used when horizontal space is at a premium, and an icon alone adequately communicates the action the button will perform.

Types

There are three types of buttons that can be used to more clearly indicate the kind of action a user can initiate.

Disabled

If an action is not currently available to initiate, but there is value in letting the user know that a particular control exists, then the disabled state is used.

Accessibility

We recommended using native HTML buttons:

<!-- best approach -->
<button type="button">...</button>

<!-- technically ok, but please don't do this -->
<input type="button" />
<input type="submit" />
<input type="reset" />
<input type="image" />

• if using a non-HTML button then make sure you use attribute role="button"
• if using a non-focusable element, make sure to add element to tab order using tabindex = 0
• Buttons should always have an accessible name typically found in the text inside the button. If using an icon button, the accessible name can be provided through an aria-label or aria-labelledby attribute.

Icon-only buttons:

<!-- HTML + aria-label -->
<button aria-label="Delete">
  <svg>...</svg>
</button>

<!-- React/MUI + aria-label -->
<IconButton aria-label="delete">
  <DeleteIcon />
</IconButton>

<!-- optional aria-labelledby to prevent duplicate action strings -->
<h1 id="some-unique-id">Delete account</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
<button aria-labelledby="some-unique-id">
  <svg>...</svg>
</button>

Non-semantic "button". Avoid this at all costs:

<span role="button" tabindex="0" onclick="handleBtnClick()" onKeyUp="handleBtnKeyUp()">Save</span>