Button
Buttons are clickable elements primarily used to perform an action, as they communicate the call-to-action and their style calls for users' attention. Buttons can also be used to allow navigation in some cases, such as for the “Next” or “Back” buttons that help users navigate through a form.
Usage guidelines
When to use
- To prompt the user to perform an action on your interface, such as submitting a form or showing/hiding an interface component.
- Although links and button have two different functions, the “Button link” type covers the use case of a link when placed within components, such as a header, breadcrumbs or card.
Writing guidelines
- Label: As buttons represents actions, use a verb to communicate clearly what the user will accomplish by pressing a button, e.g. “Save”, “Download”. (“Next” and “Back” are exceptions).
- Length: Keep labels short by using one or two words.
- Capitalization and case: Write button labels in sentence case and without punctuation.
Accessibility guidelines
Design considerations
- Don't rely on color as the only way to communicate meaning so make sure the label of your button is clear and descriptive.
- Make sure buttons have enough contrast with the background color you use that is different from primary palette colors (e.g. when picking an inclusive color in promos or stages).
- Be mindful when using icon only buttons as they might not be universally understood. You can include a tooltip displaying the label on hover or focus for a more accessible experience.
Keyboard interactions
Standard keyboard interactions apply:
- Tab: to move focus on a button
- Space / Enter: to activate button in focus
Specifications
Anatomy
- Background: Contains the label and its style can largely vary according to type, state and theme.
- Label: short call-to-action text.
- Icon (left or right): (optional) helps enhancing the meaning of the label.
Types
There are five different types of buttons:
- Primary: used for the most important CTA - when the action is a primary goal of the screen.
- Secondary: can be paired with primary buttons when they serve as a less encouraged alternative to the primary CTA, or can be placed alone when the action is not a primary goal of the screen.
- Tertiary: used to separate the action from the rest of the visual flow of the screen. An example where the added emphasis may be needed is for purchase or renewal actions.
- Link: typically used for less important action or within components as links, to ensure proper space is kept between elements.
- Action: Used for quick, simple calls to actions, where the icon is intuitive for the given context.
Variants
Primary, Secondary, Tertiary and Link buttons come in three variants: "Text only", "Left icon + text", "Text + Right icon"
Variant | Purpose |
---|---|
Text only | Basic text button. No specific icon exists or is needed for the CTA. |
Left icon + text | A specific icon exists and is useful to reinforce the meaning of the CTA. Left positioning for an icon is the common use case. |
Text + right icon | A specific icon exists and is useful to reinforce the meaning of the CTA. Right positioning can be used when there is a visual benefit to implying rightwards movement (e.g. when the button is taking the user to the next page in a sequence of steps). |
Action
Action button comes in two variants: “Shape” and “Icon only”.
Variant | Purpose |
---|---|
Shape | Can be used either as an element within a component or as a standalone element. |
Icon only | To be used within components where the shape variant doesn't fit with the layout or white space of the component (e.g. in cards). |
Size
Buttons are available in four different sizes: large, medium, small and extra small. Although the medium size should cover most use cases, choose the size that best fits your specific use case.
The width of a button varies according to the length of the label.
Styling
Theme
Buttons are available for both light and dark theme.
Emphasis
Filled buttons (for primary actions) come with a solid background to be more prominent than outlined buttons (for secondary actions), that are styled with a visible stroke but no background color. If you need to place an even lower emphasis on a button, you can use a link button.
Color
Tertiary buttons can be used to give a semantic meaning to a button: use Sky Blue for “Alert”, Moss for “Positive” and “Peach” for negative.
Behavior
Positioning
Buttons should be positioned in consistent location throughout your UI. They are commonly placed in:
- Modals
- Forms
- Action cards
- Promos
- Stages
Alignment
Buttons can be center, left or right aligned, depending on the case. In general, center or left alignment is a good option but in cases such as multi-steps forms, aligning buttons to the right of the container can help provide a better user experience.
Center and right alignment
Left Alignment
Grouping
Spacing between buttons in a group can vary according to the viewport, button size or space available in a container. As a general rule, leave at least 8px of spacing between buttons.
Button groups are commonly laid out horizontally but can be stacked vertically if horizontal space is scarce, for example in mobile viewports. Buttons can optionally stretch to fit the width of a small container (or mobile device).
When grouping more than two actions, pair together a maximum of two button types, to avoid creating a confusing experience for the user.
Interaction
For each button type there are five button states — enabled, hover, focused, pressed, disabled and loading.