Calls to Action

Guidance

Calls to action are interactive UI elements that prompt user engagement. The size, alignment, and placement of these elements combine to not only show users what to interact with, but convey the level of importance with which to do so.

Size

• Users will naturally focus on the largest element with the strongest visual weight over smaller, less punchy ones within a given space. Thus, it’s important to use calls to action intentionally to bring attention to key actions over others that are less important.
• The size of Buttons and other call to action elements should be proportional to the context and content around it.
• Buttons should not be so large as to be visually overwhelming but also large enough to interact with.

Alignment

Left Alignment

Left-align Buttons for single-page forms and full-page, focused tasks, and sort by importance from left to right. This arrangement supports an F-pattern (top to bottom and left to right in a horizontal direction) optimal for processing through forms.

Right Alignment

Right-alignment places the primary Button in the direction of forward-progressing movement. They are commonly used in a series of sequential Modals where a user is progressing through a series of steps.

Button alignment should be the same on mobile as on desktop. However, when placed in an Action Bar, the Primary Button should be on the far right, with Secondary Buttons on the left.

Center Alignment

Consider center-aligning standalone Buttons in smaller contexts such as Menus, Modal components, and Dialog components.

Placement

Top Placement

Placing call to action Buttons at the top of a page or container is optimal for actions that you want users to immediately take action on, are of high prominence such as those used to “Add” or “Create”, or actions that affect the contents below it.

Bottom Placement

Place call to action Buttons at the bottom of the page to support F shaped reading patterns on forms. This placement prompts users to process and enter information from top to bottom before acting on the action Buttons to advance in their process, such as submit.

Button Groups

Button groups arrange a series of buttons together horizontally on a single line with equidistant amount of spacing in between.

When vertically stacking buttons:

• Align buttons to the left.
• Display all with the same width.
• Separate with 16px spacing for large and medium size Buttons.
• Separate with 20px spacing for small Buttons.

When arranging buttons horizontally:

• Buttons should be the same size.
• Separate with 16px spacing for all Buttons.

Do’s and Don’ts

Accessibility Considerations

• For guidelines specific to Standard Buttons, see the accessibility documentation under the Usage tab in [Standard Buttons](/components/buttons/standard buttons).
• Text must exceed a contrast ratio of 4.5:1 against the background (see minimum contrast requirement).

Standard Buttons

Use the decision tree below as a guide to determine what Button should be used for your use case.

Button or Hyperlink

Hyperlinks

• Always navigate to another page.
• Are underlined in their default state to help users identify them from their surrounding text.
• Often occur within a surrounding block of normal text, such as in paragraphs or lists.
• Have no limits as to how many should be on a page.

Buttons

• Best used for actions that will change data, manipulate how the data is displayed, trigger same-page actions, or change state.
• Common actions include adding, deleting, and refreshing page content or submitting a form.
• Use Tertiary Buttons for standalone actions outside of a paragraph or block of text.
• If using Button styling for navigation, ensure an anchor link is used as the underlying semantic element.

Drop-down Buttons

Drop-down Buttons reduce visual clutter by grouping actions together under the appearance of a single button.

Drop-down Buttons

• Have a single touch point. Clicking anywhere on the Button opens the menu.
• Text label is generic and describes the group of actions in the menu.
• All actions in the menu are of equal emphasis.
• Split Buttons have separate click targets for the primary action and the caret icon which opens a menu of secondary actions. We discourage the use of Split Buttons as they may lead to discoverability issues because users may not notice the caret as a separate touch point.

Common Button Labels

Below are common labels used for Buttons. When creating your own, please refer to the Buttons and Calls to Action page in the UI Text section of the Content Style Guide for button language guidelines.

Common Scenarios

Edit Page with Action Bar

This scenario features a standard edit page with an Action Bar:

1. A medium size Primary Button in the Action Bar for Submit. This emphasizes the submit action as the highest priority.
2. One Secondary Button in the toolbar for Cancel.
3. A small Secondary Button in the Table.

View Page with Secondary Buttons

This scenario features a view page with Secondary Buttons in a Table. Each row in the Table shows a small Secondary Button to view additional details.

Dropdown Button Opens a Menu

Use a Dropdown Button, which leverages a Secondary Button with caret icon, to consolidate actions of equal importance into a menu rather than showing them separately. A good number of actions would be 3 or more, as users will have to perform an additional click to open the menu. If there is a primary action, it should be separated out into its own Primary Button.

Triggering a new UI component to appear on the page

This scenario features Cards with Tertiary Buttons. Activating the Buttons opens a Modal component where the user can play a video.

The card uses a Tertiary Button to maintain emphasis on card content. Because Tertiary Buttons do not have a border, they relate themselves to the component in which they appear.

Side Panels

A Primary Button is positioned at the top of the Side Panel, indicating this action is high priority and used for the top for space-wide actions.

Icon Buttons

This scenario features an Icon Button and a primary Button in a Dialog component:

1. Using a shopping cart icon is familiar for checking out.
2. Primary Button is used in the open Dialog component to draw attention to checkout as the critical action in this process.