Components

Buttons

Buttons allow users to interact with the interface, selecting options and triggering actions. This guide explains how to use them.

This guide contains

Usage

Primary Buttons

Primary Buttons exist to guide the user in the interface. Therefore, they should not be used excessively, otherwise the user might get confused on what to do next.

Secondary Buttons

Secondary Buttons support primary buttons but are lower in the hierarchy and therefore not as important. They should not be used for the most important (inter-)actions.

Text Buttons

Text Buttons simply consist of text and can be used as secondary buttons to display hierarchy.

Grouping

Buttons can also be used in groups that contain related actions. Ensure there is only one primary button to help focus and avoid confusing users. Grouping isn’t required, but sometimes it makes visual sense to separate related buttons from unrelated buttons.