Buttons let users take an action
Links take a user to a different page
Primary Fill button
Fill buttons are heavy on purpose. They are supposed to create a stark contrast, to easily and quickly direct the user to the primary action. Primary CTAs/buttons should always be used as the most important CTA on the page. Primary buttons can be used in conjunction with a secondary button or tertiary button to create a clear visual hierarchy of importance of actions to be taken.
Secondary Hollow button
Hollow buttons are lighter in weight and create less of a contrast on the page. They indicate a secondary action and can be used in conjunction with a Primary CTA to create a clear hierarchy of importance of actions to be taken.
Tertiary Flat button
Tertiary buttons work great for “Learn More” buttons and in areas where there is limited room, such as mobile screens and in card components.
To meet accessibility standards, try avoiding the usage of the disabled button. If it is needed, a screen reader message will have to be added that explains what steps the users must perform to continue the working flow.
To make all buttons accessible we have to add a 2px transparent outline around Flat buttons and our red buttons on the dark background
To achieve maximum contrast buttons are available for light and dark UI.
• Standard Body Copy: align button on the left side of the screen
• Affirmative button on the right and dismissive button on the left
• use the Z-reading pattern for Modals and Wizards by placing the buttons on the right
• use the F-reading pattern for Forms and Cards by placing the buttons on the left
• Maximum Character count is 26 characters,
• Button content is set in Title Case
• Font always Gotham Medium at 16px
• Don’t use generic language for button content, use words that create a call to action (ex: “Would you like to upload the document?” Button content: Okay vs Add. Add is a call to Action and explains what the user is about to do when clicking on the button.
Border Radius
2px
Size
Two sizes are available, Small and Standard.
Mobile CTA
Mobile buttons stretch all the way across the device to ensure touch target is always met. If multiple CTAs are used, such as a Primary and Secondary CTA, they will stack on top of each other or if room permits, they can sit next to each other.
Padding
22px padding is added all the way around.
Spacing between two buttons is 22px.
Action-based Color
Red buttons are only used for destructive actions, such as Delete, Remove, Disable…
Hollow & Active Style Color
Always the same color