Versions Compared

Key

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

...

  • Avoid using secondary buttons for the most important action on the page, see the Guideline on primary buttons instead

  • Avoid using secondary buttons for supplementary or minor actions that are not relevant to the task at hand, like editing existing content. See the Guideline on tertiary buttons instead

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 secondary buttons on an interface since French uses approximately 2.2x more characters than English

  • Use a muted color to signify reduced importance and not detract users attention from the primary button. Ensure there is sufficient color contrast between the button and text

  • Place secondary buttons somewhere prominent and at the natural end of a task or action. Be consistent with the secondary button placement across an application or website

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

  • 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 secondary buttons on an interface since French uses approximately 2.2x more characters than English

  • 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

...

Understanding Non-text Contrast

Key component features 

Telerik Telerik’s button component offers a secondary can be styled as a tertiary button with and without an icon. The component offering offers various states such as default, focused, and hover, and multiple button sizes for different screen sizes.

Blazor Buttons Demos - Overview

...