Skip to main content
Version: Canary 🚧

Change log

Components

Button

Overview

When to use

Use buttons when a user might need to perform an action, such as:

  • Submitting a form
  • Specify a next or previous step in a process
  • Begin a new task

When not to use

In general, don't use a <button> in place of a link (<a>) or a link in place of a button. HTML buttons and links are treated differently by assistive technologies such as screen readers, so using the wrong one can make experiences harder to use for some people.

Button styling can be applied to either <button> or <a> elements.

Buttons are for actions that affect something on the current page, such as submitting a form, playing media, or closing a modal.

Links navigate to a new page or anchor location, changing the URL.

Variants​

Primary​

Primary buttons are used for the most important actions, for example saving, sending, submitting, registering etc. Try to use only one per section or screen.

Secondary​

Secondary buttons are used for less important actions. You may use several per section or screen. They can be used independently or in a group with primary and/or tertiary buttons.

Tertiary​

Tertiary buttons are used whenever an action doesn’t need to stand out (for example, cancel and dismiss functionalities). You may use several per section or screen. They can be used independently or in a group with primary and/or secondary buttons.

Neutral​

Secondary and tertiary buttons have a neutral style option. This can be used for example in complex dashboards or data tables where less attention is called for. It is also the recommended option for pairing with danger button.

Danger​

Danger buttons are used for emphasizing actions that can be destructive or have negative consequences if taken (for example, delete or remove). Use it sparingly.

Icon​

Icon buttons are used for well-known and simple actions such as close, edit, delete etc and it should always have a tooltip. Icon buttons have color and neutral variant.

Touch dimensions​

Icon buttons have at least 32 pixel touch dimensions to ensure ease of use and accessibility across different devices. When implementing icon buttons make sure there is enough space between the buttons and other elements to decrease the chance of accidentally pressing an incorrect target.

Size​

Buttons are available in regular and compact size. Regular size should be used in most cases. Compact size can be used in tight spaces (for example, large data tables).

Loading state​

Buttons can indicate that a quick progress action is taking place (e.g., saving settings on a server). In this case, the label and optional icon disappear and a progress circle appears. The progress circle always shows an indeterminate progress.

Use the loading state for a button sparingly. It should be reserved only for when the progress is supposed to be quick (taking 5 seconds or less), and when there is no better way to communicate as such.

Use the attribute is-loading or [loading] to enable the loading state.

Disabled state​

Use the disabled state of a button when a user can't perform an action at the time of their experience.

They should be used sparingly and only for actions that they are unable to take.

The user shouldn't have to guess why a button is disabled.

It should be immediately obvious as to why the button might be disabled (e.g., an item can't be downloaded due to access). Otherwise, show the button in its default state, then provide helpful error text after it's been clicked.

To use disabled state for a button, add is-disabled or [disabled] attribute.