Buttons
Buttons are used as triggers for actions. Buttons can contain a label and/or an icon and come in a variety of styles and sizes.
On this page
Interactive Demo
This demo lets you preview the button component, its variations, and configuration options.
Component Variations
There are three button variations.
1. Primary
Use primary for the most important action on a page. Avoid using more than one primary button in a group.
2. Secondary
Use secondary for the less important or alternative action on a page.
3. Tertiary
The least important action on a page. A tertiary button can exist without a secondary button.
The design system follows the ANEB 77 accessibility standard, which means buttons need to be at least 44x44px in size. We may introduce smaller buttons in the future if ANEB 77 allows for a smaller size. You can find more details in the Target Size (enhanced) (level AAA).
What’s New
- Updated hover, pressed, and loading state colors to lighten system and pass contrast 4.5:1 text to background color accessibility requirements.
- Maintaining tap target 44x44px to meet target accessibility requirements.
- Updated buttons to follow 8x values, changing the size to all have height 48px, and the icon 24x24px.
See full release notes
Questions?
Connect with the DLS Team on Slack or by email.
Resources
Check out additional resources.