How to use them
Key actions
Use buttons when you want a user to take an action in your experience. This could be like taking a next step in process or navigating to anew page. Other common actions would be saving their progress or exporting data.
Grouping actions
When using both types of buttons together, make sure to choose your most important action to be primary and your lower priority action to be secondary.
Don't change the colors
Our buttons have set colors and formatting already and if you change them, it disrupts the consistency for our system. (and plus, we made sure our color combos are accessible)
Best practices
Provide clear and action-oriented labels
Your button label should clearly describe the action that will be performed when it is clicked. Use concise and action-oriented language that communicates the purpose of the button effectively.
Consistent placement
Place buttons consistently throughout your interface to create familiarity and improve usability. Primary actions should be prominently displayed in locations where users expect to find them.
Test for accessibility
Check to make sure buttons are accessible to all users, including those with disabilities. Use proper HTML markup, provide descriptive alt text for button icons, and ensure that buttons can be activated using keyboard controls alone.