Calls to Action

Calls to Action include Buttons and other elements which prompt user interaction.


An image of 3 Buttons: a Primary Submit Button, a Secondary Cancel Button, and a View All Tertiary Button.

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.


  • 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.


Left Alignment

Low fidelity illustration of a button group arranged from highest to lowest prominence from left to right: Primary Button, Secondary Button, Secondary Button.

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

Low fidelity illustration of two buttons from highest to lowest prominence from right to left: Secondary Button to the far left, Primary Button to the right.

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.

Low fidelity illustration of a mobile device with Secondary Button to the far left, Primary Button to the right.

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

Low fidelity illustration of a sign-in screen with a single centered Primary Button that reads “Sign In”.

Low fidelity illustration of profile menu open on Home. Primary button is centered on the menu and reads “Sign Out”.

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


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.

Low fidelity illustration of a Presentation in Drive. A Primary Button is positioned at the top right and reads “Refresh Linked Data”.

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.

Low fidelity illustration of an edit page with buttons positioned at the bottom of the page.

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

  • Use Large Buttons for standalone actions.
  • Don’t use a mix of Secondary or Tertiary Buttons in a Button Group.
  • Don’t use Large Buttons when creating a Button Group. Reserve Large Buttons for standalone actions.

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).

Can't Find What You Need?

Check out our FAQ section which may help you find the information you're looking for.

FAQ Section