| Table of Contents |
|---|
Tertiary buttons are used for reduced-importance actions that are not essential to the main task, such as "Edit", “Favorite” and "Delete". Unlike primary and secondary buttons, tertiary buttons look like links and use an eye-catching color. They may be used more than once per button group and more than one tertiary button can be used on a single page.
When to use this component
Use tertiary buttons to provide additional functionality or actions to the user that complement their primary goal or task
When not to use this component
Don’t use tertiary buttons for actions that are essential to completing the users primary goal or task
Don’t use tertiary buttons for an action that is already offered by a primary or secondary button
Best practices
Do
Ensure that tertiary buttons are based on user needs and provide value to the user
Use color to make tertiary buttons visually distinct from text
Like primary and secondary buttons, tertiary buttons should have a default, hover and focus state
Be consistent with the placement of tertiary buttons across an application or website
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
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
Avoid overcrowding an interface with too many tertiary buttons, overwhelming the user with choices or buttons that don’t provide value
Don’t use tertiary buttons for irreversible actions
Don’t use tertiary buttons without a label (icon only), buttons should always have labels
Tips
Use user-testing to validate whether tertiary buttons provide value to your users
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. Please note that while tertiary buttons are available in the Figma UI kit, they have not been developed and added to the theme.
Blazor Buttons Demos - Overview
Examples
| Info |
|---|
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