Button
Usage
Buttons allow users to take actions, and make choices, with a single tap. Buttons communicate actions that users can take. They are typically placed throughout the UI on dialogs, modals, forms, cards, and toolbars etc.
They need to be identifiable, easy to find, and clear and indicate that they can trigger an action. The action and state should be clear and different button types are used depending on the action priority or severity.
Button Types
This button is used most frequently. It's the main button to use when one action needs to be displayed. This button type may include an icon to better communicate the action, such as the upload/download actions.
The secondary button is used to display actions that do not convey high importance. It can be used inside the form to perform a secondary action, but mostly it's used as a secondary action next to the default button action.
The tertiary button is used to display actions that are of low importance. It can be used inside the form to perform a third action; this will be the third option and the furthest from the primary.
The danger button indicates that another action must be performed. It can be used inside the form to exclude an item. It may include an icon that explains the action and it can also be used as the button style when button validation takes place. Often, it's used as a warning button to indicate another action that needs to be performed before proceeding.
The icon only button is used when an action can be communicated easily with just an icon. It can be applied for small-scale interactions within the form, like handling repeatable form grids, or as an action on a top page level. This button should always be accompanied by the tooltip that explains the action. Most commonly used icons are preview, delete, duplicate, edit, and inspect.
The success button indicates that an affirmative action can be performed. It can be used inside a funnel to move to another step for example. It may include an icon that explains the action better. Often, it's used as a confirmation button to indicate that the user has reached the final step of the process and his journey can be completed by triggering that action.
Best Practices
Differentiate the importance of the actions by using different button types on the UI; the primary action should always be indicated using the primary button
The primary action can be followed by the secondary or tertiary action
Avoid giving more than two possible options to the user; additional actions can be used for a low-importance action, like closing or cancelling an intended action
Keep the button labels short and clear, by using actionable wording and avoid using stop words (“the”, “a”, “an”, “in”, …)
Do not stack buttons on top of each other, and always keep them aligned to the left
Sizes
Button sizes follow the height and stacking properties of form inputs so that they can be used interchangeably. They can be applied across all button types. Default height of the button is 40px and other sizes can be used to accentuate or de-emphasise the action or to save space on the UI.
Large | Default | Small |
Height: 44px | Height: 36px | Height: 28px |
Padding: 11px 24px | Padding: 16px 8px | Padding: 6px 8px |
Border radius: 2px | Border radius: 2px | Border radius: 2px |
Font: Open Sans Semi bold 16px/22px | Font: Open Sans Semi bold 14px/02px | Font: Open Sans Semi bold 12px/16px |
Positioning
Buttons should be positioned consistently throughout the UI.
If used inside the secondary navigation, buttons should be placed on the right side. When placed inside containers as parts of the form or inside modals, they should be positioned to the left so that the primary action is displayed first (first from the left side).
States
Buttons follow the same state styling principles across filled or outlined types.
Filled buttons change background on hover from Base to D30 (colour is dependant on usage)
Outlined buttons change background colour from transparent to Base
Focus borders: L60 for primary, secondary, tertiary, icon button types; L70 for Danger and Success button, Light Blue L60 for Info button type
Disabled filled background colour: L50; disabled outlined border colour: L50
Last updated
