Buttons initiate actions that will occur when the user clicks or touches them. A number of predefined button styles is provided for most use cases. Buttons can carry different purposes and use a variety of sizes, colors and iconography combinations. 

Preferred background usage

Depending on your background (color), you should use the most appropriate version of a button to ensure good legibility and accessibility. Buttons are sorted in hierarchical order.

White background

Types of button

Button alignments (left, center, right)

As you can see below you can choose between left, center and right alignment, which can be configured differently per small (up untill 767px) or large (768px and wider) screen.

Button alignment (fullwidth)

A button can be set full width (in it's own grid cell). This can be configured separate for smaller (up untill 767px) or larger (768px and wider) screens.

Button title (different optional title for large screens)

A different button title is possible for large screens. If no input is given for large screens the input for smaller screens will be re-used.

Preserve query parameters

Buttons have the option to preserve query parameters present in the current URL, when opening a new URL with a button. If the current URL visible in your browser does have a query parameter (starting with a "?") it will be added when clicking on the button below.