Button

Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. Button labels express what action will occur when the user interacts with it.

A single screen in an application or web experience can include more than one button. To help users clearly understand Primary, Secondary, and Ghost actions, use caution in button placement. Let the action you want to trigger determine the correct button to choose.

1. Primary Button: Primary buttons have high visual impact, and should be used for important, final actions that complete a flow, like Save or Confirm.
   
   
2. Secondary Button: Secondary buttons are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in a digital experience.
   
   
3. Ghost Button: Ghost buttons are used for the lowest priority actions, especially when presenting multiple options. Ghost buttons can be placed on a variety of backgrounds. Until the button is interacted with, its container isn’t visible.
   
   
4. Icon Button: Icon buttons help people take minor actions with one tap. Use the standalone icon button sparingly- it is usually a part of another component.

Buttons can contain up to three elements:

• A. Text label: short, call-to-action text.
• B. Container: primary element that holds content, color, and icons.
• C. Icon: optional, except in the icon button.

The most important thing is to establish a visual hierarchy between the buttons in your UI. Keep these best practices in mind.

A single, high-emphasis button

As a general rule, a layout should contain a single high-emphasis button that makes it clear that other buttons have less importance in the hierarchy. This high-emphasis button commands the most attention.

Multiple button emphasis

A high-emphasis button can be accompanied by medium- and low-emphasis buttons that perform less important actions. Keep in mind that you should only group together calls to action that have a relationship to one another.

Although secondary buttons have less visual prominence because they are less saturated than their primary counterparts, they are still visually heavy. If your layout requires multiple actions—as is the case with some toolbars, data lists and dashboards—low emphasis buttons (ghost) may be a better choice.

Alignment refers to whether the buttons are aligned to the right or the left of a window, container, or layout. Buttons are unique, more so than any other component, in that their alignment depends on where they appear and whether or not they’re contained within another component.

As a general rule, on full-page designs, the primary button is on the left side of the page. When the browser window is large and the user is scrolling to read, it’s best to have the primary button where the user’s attention has been focused all along. Whereas in wizards, where a user is progressing through a series of steps or dialog windows, the primary action traditionally sits at the bottom right. Buttons within components such as notifications, search fields, and data tables are also right-aligned.

In some cases a button group—or even a single button in the case of a side panel or small tile—may span the entire width of a window or container.

When scaling layouts for large screen devices, buttons can adapt their visual presentation, alignment, and arrangement to fit different contexts and user needs.

The size and placement of buttons can change as parent containers, such as cards, adapt for larger screens.

Button groups are a useful way of aligning buttons that have a relationship. Group the buttons logically into sets based on usage and importance. Too many calls to action will overwhelm and confuse users so they should be avoided.

A button’s text label is the most important element on a button, as it communicates the action that will be performed when the user interacts with it. Buttons need to be clear and predictable.

Make sure button labels are unique and descriptive. Labels like “Click here” and “Read more” don’t provide context. In addition, some screen reader users also navigate via a list of all the buttons on a page or screen. Therefore, all button labels should provide an indication of what will happen if activated. For examples of acceptable labels, see the WCAG Content Guidelines.

WCAG 2.1: 1.3.1 Info and Relationships