Primary buttons are the main call-to-action (CTA) on a page. They are strategically positioned and visually distinct from other buttons and elements to help guide users toward the important actions or decisions on a page. Primary buttons are meant to attract attention and drive the user forward, because of this, there should only ever be one primary button per page or button grouping. Primary buttons are often made visually prominent using primary branding colors.
Tip: If you’re unsure which button should be your primary button, ask yourself what the user needs to do to move forward or complete the workflow.
When to use this component
Use primary buttons for the most important action on a page that helps the user achieve their main task or goal
When not to use this component
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 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
Tips
Use user-testing to validate the clarity and effectiveness of primary 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 button component offers a primary button with and without an icon. The component offering various states such as default, focused, and hover and button sizes 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