Overview
A button serve as an interactive element that enables users to perform an action or make a choice with a simple click or tap. To decide which kind of button/buttons and putting them in the right order is key to make sure users know how to take the right action. A good rule of thumb is to use only one primary action in each context.
Buttons
We have a group of different buttons used for specific purposes.
Default button
The default button is our most used button. It comes in primary, secondary and tertiary, and the sizes small, medium and large.
The default button can be used as the positive, negative and inverted type.
Icon button
When there is space, the icon button should always be grouped with a text label. This text provides additional context for users who may not understand the icon alone. If space is not available the icon need to be self explanatory, and have a tooltip function explaining the action.
The icon button comes in primary, secondary, and tertiary. In the sizes small, medium, and large. The icon button also comes as a tonal in two sets. One tonal in grey, used mostly on our container colour. And a few custom tonal combinations, used on custom combination cards. For example our alert ribbons.
The icon button can be used as the positive, negative and inverted type also when the context needs it.
Floating action button
Only used for functions central to the user experience, such as support and help features that needs to be accessible at all times.
The button is always floating visible in the users viewport, typically in the lower right corner. This button can be used with an icon only.
Used only as primary.
Split button
The split button always has a primary action. This action is most likely to be used by the customer as the default action.When users click on the primary action, it triggers this action directly, such as submitting a form, confirming a selection, or initiating a process.
The users can click on the dropdown arrow to reveal a dropdown menu providing secondary or additional options.
The split button comes in both primary and secondary.
Next and back button
Used inside flows to signal the direction forward or backward.
Back button comes in both primary and secondary state depending on what suits the content. The next button comes as primary only.
Style
- Default: The preferred choice of button in most contexts.
- Positive: To be decided.
- Negative: Use for the actions that may be harmful or destructive. A good example is deleting
- Tonal: Only used internal in other components (to match a background).
- Inverted: Used to place on other than the normal backgrounds (typically darker tones).
Hierarchy
It's critical to find the right balance of what buttons to use. It's up to us as designers to guide and inform the users to take the right action.
- Primary buttons require the most attention from your users.
- Secondary buttons, as the name says, is the second most likely choice.
- Tertiary buttons are used for less used or unwanted actions that is still relevant to find.
Button sizes
The default button and icon button comes in a few different sizes. 32, 40 and 48 px.
Placements, right, left or stacked?
A general rule is to always strive to place buttons in connection to the items they control.
Desktop placements
- Left: In overviews and widgets, the user tends to read from top to bottom, therefore the buttons are kept to the left.
- Right: Modals and flows move the user from left to right, therefore the buttons are placed to the right.
In a mobile device
- One button, use the full width of the content area.
- Two buttons, aim to place them side by side. It is allowed to stack them if needed.
- Three buttons, consider the need for all of them. "cancel or close" might be x in the top right corner. Worst case scenario: place two buttons side by side and one tertiary button under.
Wait-time after button pressed.
To be explored.
Do’s and don’ts
Do
- Only use one primary action in the same context of several actions.