COMPONENTS
Button
Buttons allow a user to take an action.
- Call to Action
- Container
- Icon
There are four types of buttons – icon only, basic, leading icon and trailing icon.
Button has five core action types – primary, secondary, info, contrast and destructive.
Action types offer five distinct styles to be used in different scenarios:
- Primary - typically used for the most important functional calls to action in data-driven applications and sites.
- Secondary - typically used for ancillary calls to action.
- Info - typically used for the most important informational calls to action in content-driven applications and sites.
- Contrast - typically used for calls to action that are overlaid on imagery or dark backgrounds.
- Destructive - should be used sparingly and only for actions that are destructive and permanent including deletion or removal.
All button types have three levels of emphasis available — bold, subtle and minimal. Bolder emphasis will help to bring more attention to a button.
Buttons can be built with a square or circle shape. The square shape maintains 2 pixel rounded corners.
Button status helps to provide feedback to the user after clicking or tapping on a button. In a happy path, the user will progress from the loading status to the success status and then return to the enabled state. In an error scenario, the user will progress from the loading status to the error status and should be shown messaging to alert them as to what went wrong and how to move forward.
For each button action type and emphasis style there are five button states — enabled, hover, active, focus and disabled.
Buttons can be displayed in extra large, large, medium and small sizes.
By default, the width of a button should be defined by the length of the text. Alternatively, a button can be set to a custom fixed width in order to maintain a consistent look across a page design.
- Important buttons should be immediately visible to the user without scrolling.
- Reference the Writing guidelines when writing calls to action.
DO: Use emphasis to make a button appear less important than an adjacent button.
DO: Use minimal emphasis for icon only buttons that are paired with a bold button for the main action.
DON'T: Don’t use the destructive action type for actions that are not permanently destructive. It is a strong color and may appear as more important than it is meant to be.
DON'T: Don’t use primary and info styles for adjacent buttons. They are both strong styles that are not meant to be placed side-by-side.
DO: Only use one primary styled button when several buttons are adjacent to each other in the same container.
DON'T: Use multiple primary styled buttons when several buttons are adjacent to each other in the same container.
Many custom interactions can be built using buttons.
Button can be paired with Text or Label to create a clickable anchor link for sections on a page.
Floating action buttons are typically icon-only buttons that can be used for items like back to top or menu buttons.
Social share buttons can be setup as a clickable toggle that exposes a custom menu or a popover menu that appears on hover.
Contents