Button

Usage

When to Use

Use buttons to trigger actions, like, 'reset', 'create' or 'cancel'. Buttons come in multiple styles for various needs, so make sure you understand the different types and when to use them.

When Not to Use

Buttons are for actions only. If the element opens a new tab on the browser or navigates to another page, use a link instead.

Size

All button variants are available in two sizes: medium (28 pixels height) and small (24 pixels height). Decide on one size for the whole application. This decision also affects text fields, select fields, and switchers. Refer to the Sizing and Spacing Guidelines for more information.

Medium-sized button

Small-sized button

Basic Variants

There are three basic button variants, and each creates a different amount of emphasis: The regular button, the primary button, and the text button.

Regular Button

Use regular buttons as your starting point. If it’s not bold enough, you can emphasize it by using a primary button. If it’s too bold, you can de-emphasize by using a text button. You can use regular buttons several times on one screen. They are often used in combination with a primary button to indicate a secondary action.

Primary Button

A primary button indicates the most important action on the currently active screen. It is best to use not more than one primary button per active screen. When there are more primary buttons, users don’t know what to focus on.

Not all screens need a primary button. If no action should stand out more than others, there is no need to include a primary button in the interface.

Text Button

A text button takes up the least amount of space and creates the lowest emphasis compared to the previous button styles. Use it for less important actions or if the regular button feels too strong.

Text buttons are often used in combination with other elements, for example, texts or lists. To give a feeling for this, a few examples are displayed here.

Icon Button

Buttons don’t always contain only text. They can be supplemented with an icon and can even be displayed without text and just by an icon. Pay special attention when using these variants. When they are used wrong, they can confuse users instead of helping them.

Complementary Icon Button

The complementary icon button uses an icon in combination with a text label. They are available as primary solid, regular solid and text-based. They are used according to the rules specified in the previous chapter basic variants.

primary solid

regular solid

text-based

Only use complementary icon buttons if both of the following points apply to your situation:

• The button should stand out
  Adding an icon to your text label enhances the visibility of the button. Therefore, only add an icon to a button if the button should stand out.

• The icon is generally recognizable
  Don’t use icons for decoration. A supplementary icon can enhance readability for universal and generally recognizable icons, like search or delete. If the icon is hard to decode, there is usually no advantage in adding it to the text label.

Don’t use the 'chevron-down' icon on buttons to indicate a drop-down button. The drop-down button is a separate button type and has the icon on the right-hand side.

Icon-Only Button

Icon-only buttons don’t contain a text label and are displayed by an icon only. They are available as an outlined variant, and in two non-outlined variants with different emphasis.

outlined

non-outlined high emphasis

non-outlined low emphasis

Make sure that all icon buttons have a tooltip attached.

Destructive Button

Use destructive buttons for actions that have a destructive effect on the data, like ' delete' or 'remove'. Destructive buttons are available as outlined and non-outlined, each in text-only, complementary icon, and icon-only style.

outlined

non-outlined

Always position destructive buttons far away from other buttons so that users don’t select them by mistake.

Delete and Remove

Use the word delete if the element will be erased from the whole application (e.g. deleting a contact from your phone). Use the word remove if the element is taken away from the current context but is still accessible somewhere else (e.g. removing a song from a playlist). (Start It Up, Remove vs. Delete)

Use the trash icon for delete-like actions. Use the close icon for remove-like actions.

Disabled Button

Disabled buttons do not invoke an action when clicked. Only use them if it is obvious why the button is disabled. If it’s not obvious, users will get confused.

Disabled buttons are often used to indicate that a required input is missing. When more than one or two inputs are required in a form, it is best to not use a disabled button for this purpose. Instead, have the button always enabled, even if some input is missing. If users click the button before entering all required information, an error message or error bubbles will tell the user what’s missing.

Ellipsis Button

Ellipsis buttons don’t trigger an immediate action. Instead, they open a new modal window. Within this modal window, the user usually enters some further information and then takes some action. Do not use the ellipsis button when the button opens a modal window that doesn’t necessarily require further interaction, like help pages or settings.

Drop-Down Button

Similar to the ellipsis button, the drop-down button indicates that the action is not immediate. Instead, a click on the button will unfold a modal window below the button, similar to the behavior of a select field.

Split Button

Split buttons display a text button that is supplemented with an icon button. The icon button contains some action that is directly related to the action on the left-hand side. There are two options for this icon: the 'more-options' icon (ellipsis) or the 'chevron-down' icon. They behave similarly to the ellipsis button and the drop-down button.

Process Button

Each button can be in a processing state. Activate this state if an operation takes longer than 2 seconds. (UX Movement, When You Need to Show a Button’s Loading State)

Button Group

The button group is the standard construct to position multiple buttons next to each other.

If you want to indicate that specific buttons within a group of buttons have relationships of varying strength, use different horizontal spacing.

Avoid mixing more than two different button types in a button set. Usually, avoid mixing text buttons with primary or regular buttons.

Content

Use active words that describe what is happening when the user clicks the button.

Use short and descriptive labels.

If it’s not obvious to what element the button is related, use a more descriptive label by explaining what will happen when the user clicks the button. Prefer clear labels to short ones.

Write like humans talk. When the labels are pronounced aloud, they should sound like you are talking to a friend or colleague. Refer to the language and grammar guidelines for more information.

Use sentence capitalization.

Don’t use 'click here ...' or similar phrases in your labels, since buttons are always clicked to trigger the action.

Don’t use 'now' or similar words in your labels, since buttons always initiate an immediate action.

If you suspect that the meaning of a button might not be clear enough, describe what it does in a tooltip or a description. Use the tooltip for less important descriptions or when there isn’t enough space. Use the description text below the button if the description is essential.

Structure

Create hierarchy. Emphasize important actions and de-emphasize less important actions by using different button variants.

Users primarily remember the position of a button. Therefore, use consistent locations for similar buttons across your application. Look around your application and search for similar cases.

Position your buttons from left to right. The primary button or the most important button should be in the leftmost position. Position other buttons in descending order of their importance to the right.

When you have to position a group of buttons on the right side of the screen , order the buttons from right to left. Only do this if the alignment to the left is not possible.

Avoid vertical alignment of buttons if possible.

Don’t use labels for buttons. The button label itself should be enough to describe the action. If the button label is too long, use a description text instead of a label.

Layout

Use 8 pixels of horizontal spacing if multiple primary and standard buttons are aligned horizontally.

Use 16 pixels of horizontal spacing if multiple text buttons are aligned horizontally.