All about Buttons

There are a lot of different kinds of buttons, and they have to be used in a specific order.

Att. 02 is the black and white color. They should NOT support a primary action, and can, therefore, be used more than once on each page. They are less noticeable than att. 01,
but more noticeable than att 03.

Att. 03 is the less noticeable button, they should be used when you don’t want too much attention on a button.

Att. 04 comes without a box around it. Be aware when you used it, that the button looks like a text,
and can be hard to see as a button. Therefore, it should be used with caution.

Floating button

Large

Medium

Small

The button size differentiates from large to small. The X-large is only for floating buttons,
and they are the only ones with an elevation. The use of the size depends on the context, it depends on how much attention you want to give the button.

The buttons with an icon should only be used when the icon is communicating something.
Otherwise, they are just for decoration, and we don’t want that. E.g. they can communicate navigation. E.g. a button link’s icon communicate that you are going to an external link.

Keep your submit-button disabled until all required fields are filled. Validate your input field on leaving it (even though the submit-button is disabled.)

Attention levels

The buttons with an icon - how to use?

Best Practices

The button size

The attention levels go from 01 to 04. This means that att. 01 is the most noticeable button.
It’s the primary color, and should only be used when there is a primary action. There can only be one primary action on each page, therefore should att. 01 only be used one time on each page.

Add text

Back to home

Back to Previous