Secondary buttons

Secondary buttons are often used to complement primary buttons, offering users an alternative yet relevant action. Unlike primary buttons that help the user move forward with an important task, secondary buttons are used for less important actions like the “previous” and “next” buttons used to navigate a form. Secondary buttons are often a more muted color so as not to detract attention from the page or groupings primary button. While it's possible to include multiple secondary buttons on a page or within a button grouping, it's best to use them sparingly. When using multiple secondary buttons, try to distribute them strategically to prevent overwhelming users with an excessive number of choices.

When to use this component

• Use secondary buttons for actions that are less important yet relevant to the main task on a page

When not to use this Component

• Avoid using secondary buttons for the most important action on the page, see the Primary buttons article 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

• 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

Don’t

• Don’t hide secondary buttons and make them challenging for users to locate

• Don’t overuse secondary buttons, this may overwhelm users

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

• Don’t underline text on a secondary button

Tips

• Use user-testing to validate the clarity and effectiveness of secondary button labels and placement

Accessibility 

The WCAG criteria outlined in this section were chosen because they represent some of the most common failures when designing and implementing these components. For a comprehensive list, please see Web Content Accessibility Guidelines (WCAG) 2.1 (w3.org).

1.4.11: Non-text contrast

All active UI elements must have sufficient contrast to ensure readability and usability for users with visual impairments or in varying lighting conditions. The contrast between the primary button's text and/or icon and its background must meet the minimum contrast ratio of 3:1. Use tools like WebAIM’s Contrast Checker to verify compliance.

Understanding Non-text Contrast

Key component features 

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

Blazor Buttons Demos - Overview

Open

Figure 1 - Secondary buttons with and without icon example (left to right: default, focused, hover)

Examples

Open

Figure 2 - Telerik secondary button component at the conclusion of a form

Resources

External resources 

Ontario Design System - Buttons

GOV.UK Design System - Buttons

WebAIM Colour Contrast Checker

Designing for Action: Best Practices for Effective Buttons