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
Exception: 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.
When not to use this Component
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
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
Examples
Note: The following example is a visual illustration of how this component could be used in a MAACE application. Live examples of the Telerik UI component implemented in MAACE applications will be added when available.
Resources
External resources
Ontario Design System - Buttons
GOV.UK Design System - Buttons