Button. Overview

What does the component do?

  • It triggers an action on a page.

When should the component be used?

  • When starting or ending a process.
  • When sending a form.
  • When selecting a function on a page.

Rules

  • Cannot be used within body copy.
  • Cannot be used in the header as navigation or a function.
  • The minimum width is 60px.
  • The width increases with the text length. The width is 100% for mobile views.
  • If the text is still too long when the maximum length is reached, it is shortened with “...”.
  • The text is always single-line.
  • Buttons are right-aligned in the viewport. The primary button is positioned to the left of the secondary button.
 Variants

States

The component has the following states:

  • Default
  • Hover
  • On-click
  • Disabled

Variants

Primary button

[object Promise]

Alternative primary button

[object Promise]

Secondary button

[object Promise]

Ghost button

[object Promise]

Icon button

[object Promise]

When hovering over an icon button, a tooltip should be used to make the underlying action clearer.

Multiple actions

[object Promise]

Specifications

[object Promise]