Introduction
Buttons are clickable elements that are used to act. They contain perform an action. Button contains a text label and a supporting icon can be displayed.
...
Buttons can contain a combination of a clear label and an icon while links are always text. Button is always displayed as an icon.
...
States
Buttons have five four states that define their appearance:
...
Not all features need to have primary actions, sometimes the actions are secondary to the content and are all of equal importance.
primary.large.text.
 | Default (State) |
 | Hover (State) |
 | Focus (State) |
 | Disabled (State) |
primary.large.icon+text.
 | Default (State) |
 | Hover (State) |
 | Focus (State) |
 | Disabled (State) |
primary.large.icon.
 | Default (State) |
 | Hover (State) |
 | Focus (State) |
 | Disabled (State) |
primary.small.text.
 | Default (State) |
 | Hover (State) |
 | Focus (State) |
 | Disabled (State) |
primary.small.icon+text.
 | Default (State) |
 | Hover (State) |
 | Focus (State) |
 | Disabled (State) |
primary.small.icon.
 | Default (State) |
 | Hover (State) |
 | Focus (State) |
 | Disabled (State) |
Secondary
The secondary button is the standard button for most use cases. The outlined styling places less emphasis on these buttons.
secondary.large.text.
 | Default (State) |
 | Hover (State) |
 | Focus (State) |
 | Disabled (State) |
secondary.large.icon+text.
 | Default (State) |
 | Hover (State) |
 | Focus (State) |
 | Disabled (State) |
secondary.large.icon
 | Default (State) |
 | Hover (State) |
 | Focus (State) |
 | Disabled (State) |
secondary.small.text.
 | Default (State) |
 | Hover (State) |
 | Focus (State) |
 | Disabled (State) |
secondary.small.icon+text.
 | Default (State) |
 | Hover (State) |
 | Focus (State) |
 | Disabled (State) |
secondary.small.icon.
 | Default (State) |
 | Hover (State) |
 | Focus (State) |
 | Disabled (State) |
Primary reversed
The primary reversed should be used for primary actions on pictures or dark backgrounds.
primary.large.text.
 | Default (State) |
 | Hover (State) |
 | Focus (State) |
 | Disabled (State) |
primary.large.icon+text.
 | Default (State) |
 | Hover (State) |
 | Focus (State) |
 | Disabled (State) |
primary.large.icon.
 | Default (State) |
 | Hover (State) |
 | Focus (State) |
 | Disabled (State) |
primary.small.text.
 | Default (State) |
 | Hover (State) |
 | Focus (State) |
 | Disabled (State) |
primary.small.icon+text.
 | Default (State) |
 | Hover (State) |
 | Focus (State) |
 | Disabled (State) |
primary.small.icon.
 | Default (State) |
 | Hover (State) |
 | Focus (State) |
 | Disabled (State) |
Secondary reversed
The secondary reversed should be used for secondary actions on pictures or dark backgrounds.
secondary.large.text.
 | Default (State) |
 | Hover (State) |
 | Focus (State) |
 | Disabled (State) |
secondary.large.icon+text.
 | Default (State) |
 | Hover (State) |
 | Focus (State) |
 | Disabled (State) |
secondary.large.icon
 | Default (State) |
 | Hover (State) |
 | Focus (State) |
 | Disabled (State) |
secondary.small.text.
 | Default (State) |
 | Hover (State) |
 | Focus (State) |
 | Disabled (State) |
secondary.small.icon+text.
 | Default (State) |
 | Hover (State) |
 | Focus (State) |
 | Disabled (State) |
secondary.small.icon.
 | Default (State) |
 | Hover (State) |
 | Focus (State) |
 | Disabled (State) |
...
Sizes & Padding
 | Large button | The Large button is the alternative button size for use in ample spaces. | Medium button |
The Medium button is the default button size. |  | Small button | The Small button is the alternative button size for use in tight spaces. |
Dropdown lists, links, retailer buttons?
Usage
When to use
Buttons use a variety of sizes, colors, and iconography combinations.
Use a Button to enable actions or decisions that are important to a user. They should be used throughout your UI, it can be used in situations where users need to :
submit a form
confirm a change
begin/create a new task
trigger a new element to appear on the page
specify a new or next step in a process
When not to use
Do not use buttons as navigational elements. Instead, use links when the desired action is to take the user to a new page (with the exception of the back and forward buttons).
Writing labels
...
Do
Button labels use sentence case (Capitalize the first letter, use lowercase for everything else) and are as short as possible
...
Don’t
Use label while clearly explaining what happens when the button is activated.
The button text should be actionable so users know exactly what to expect when clicking.
...
Do
Button labels are as short as possible, while clearly explaining what happens when the button is activated.
...
Don’t
For maximum legibility, a text label should remain on a single line. Find another label if you can’t do it !
Combining button styles
...
Do
When using multiple buttons, you can place an outlined primary button next to a primary button.
...
Don’t
Avoid using two primary buttons next to one another.
| View file | ||||||
|---|---|---|---|---|---|---|
|
Do
If you really need to use two similar buttons you can use secondary buttons.
...
Do
The primary button should only be used once per view.
...
Don’t
Use several primary buttons it will loose emphasis.
Stretched buttons on mobile
| View file | ||||||
|---|---|---|---|---|---|---|
|
Do
Keep mobile margin with stretched button on mobile.
| View file | ||||||
|---|---|---|---|---|---|---|
|
Don’t
Use full screen with stretched button on mobile.
Alignment
...
. |
...
Central alignment is normally saved for more visual areas of projects such as introductory banners or carousels.
Right alignment is normally saved for forms, stepped submissions, or simple Icon with Label hyperlinks.
Disabled/inactive Buttons
Inactive buttons can be used to communicate to the user that a certain action would be possible if circumstances were different, such as entering an email address in a text field prior to signing up.
Reduce opacity, not hue saturation.
Put it next to enabled buttons when it's possible.
Use “cursor disabled” on desktops on hover state.
Add supporting text.
Accessibility
When using buttons with images or backgrounds, make sure that colors are accessible. They must pass the AA contrast check with a ratio greater than 3.1:1.
You can check your colors using the plugin Stark - Contrast checker.
If the primary CTA doesn't work for accessibility reasons, there is a secondary for colored backgrounds. You can find more information about accessibility when using our colors.
Nb: Text or images of text that are part of an inactive user interface component, that are pure decoration, that is not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
Web
Android
...