The primary button is used as the main call to action

The secondary button is used for subordinate actions

The text button can be used for a more subtle call to action.

The stretched primary can be used, like the primary as the main call to action.
However, it should only be used on smaller viewports or smaller containers, never on the full width of large viewports.

Except for the stretched primary button, other buttons can be placed in groups.
However, when buttons for more or less opposite actions are combined, the combination should be a text button and a primary button, with the primary button on the right.
Other combinations can be used more freely, depending on the situation.

Buttons can be accompanied by an icon to emphasize its function.
Icons should always be positioned left of the button-copy, except for a right pointing chevron, in which case the icon should be placed right of the button-copy

Buttons, whether a single button or a group, should be right-aligned

example: buttons used in a card

example: buttons used in a form