Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  • Avoid using primary buttons for less important actions, see Guidelines on secondary buttons and Guidelines on tertiary buttons

  • Don’t use primary buttons for destructive and irreversible actions such as deleting content or canceling a request. See Guideline on destructive buttons

  • When using buttons for pagination − the "Next" button is considered the primary action button and appears on the right of the page but should still be styled as a secondary button.

Best practices

Do

  • Label buttons clearly and keep text short yet descriptive. Labels should use a max of 25 characters. Use common action verbs to help users to understand what action they are initiating when they interact with the button

  • Consider the French translation when designing and placing primary buttons on an interface since French uses approximately 2.2x more characters than English

  • Use a color that stands out such as a primary branding color to signify importance and capture the users attention. Ensure the is sufficient color contrast between the button and text

  • Place primary buttons somewhere prominent and at the natural end of a task or action. Try to be consistent with the placement across an application or website

  • When pairing a primary button with a secondary button, such as in a modal, place the primary button on the right of the secondary button. If designing for mobile, place the primary button above the secondary

  • Buttons should be the size of the text label with additional padding. Use 32px of horizontal spacing (white space) between buttons for desktop and 24px of vertical spacing (white space) between block-level buttons for mobile

Don’t

  • Don’t use primary buttons for actions the have minimal impact on or distract from the users main task or goalDon’t hide primary buttons and make them challenging for users to locate

  • Don’t overuse primary buttons

  • Don’t use multiple different colors for primary buttons across an application

  • Don’t underline text on a primary button

...