Components

Button

Buttons are clickable elements that trigger events or actions. They communicate actions to the users and allow them to interact with our interfaces in a variety of ways.

Usage

Buttons inform the users of possible actions they can take. Buttons can be used throughout the user interface, for example in: forms, cards, games, widgets and toolbars.

Emphasis

When designing, consider the hierarchy between the available actions of your interface. The primary action of the screen should be represented by a primary button, while secondary and tertiary actions should be represented by lower emphasis buttons.

Button types

1. Primary button
2. Secondary button
3. Outline button
4. Ghost button
5. Link button
6. Destructive button

Primary

The primary button has the highest visual emphasis and should be reserved for highlighting primary action of the section or page. Generally, only one primary button should be presented at one time. Typical actions where a primary button should be used are making a purchase or completing a form.

Secondary

Secondary buttons are less emphasized than the primary button. Secondary buttons should be used when an alternative, but related action to the primary is available, e.g. “cancel” or “back”.

Outline

Outline buttons are further visually de-emphasized and can be used for important, but non-primary actions. Typical usage can be accessing optional functions without committing to a confirming or cancelling action.

Ghost

The ghost button is the lowest emphasis button and can be used for subtle actions in a design to provide the contextually least important option. Ghost buttons are often used together with a primary button.

Link

Link buttons visually mimic text links in the interface and can be used to lead the user to other destinations where additional information or other functons are provided. Common uses for a link button are "learn more" and "terms and conditions" type actions.

Destructive

For actions that remove or delete data the destructive button can be used. In our customer facing interface few such actions are available, and as such should be used sparingly. However, scenarios where appropriate usage of the destructive type may be found more commonly in for example internal systems and applications.

Formatting

Button sizes

Sizes outside of the default, medium option are available, but keep in mind to primarily utilize the different button types to establish hierarchy, and as such avoid grouping buttons of different size together.

Small

In designs where space is severely limited a small button may be used. In general try to use the medium size whenever possible.

Medium

The medium-sized button serves as the default option and is designed to accommodate the vast majority of use cases.

Large and extra large

The larger variant buttons can be used where the associated action demands extra attention, but should be done sparingly. A typical example may be a CTA within a hero banner at larger breakpoints, where a default size button may not be visually prominent enough.

Anatomy

Buttons contain one required element and, at least, one optional element.

Text labels

To assure good legibility, a text label should be placed on one line and not be wrapped on multiple lines. If you have narrowed width space to place your button, move it below the associated content.

Limit label text to one line within the button.

Avoid having the label text span across two lines.

Modify

Icons

Icons can be placed in a button to guide the user and to enhance the experience. The icon can be placed to the left, or to the right of the text.

1. Icon left
2. Icon right

Best practices for icons within buttons

To make a button clear and intutive, only use one icon per button. If an icon is used in combination with a text label, align them horisontally.

One icon per button

Limit icons to one per button

Don’t vertically align an icon and text in the center of a button.

Icon Button

Icon buttons are compact buttons that only use an icon to represent the associated action, without a label. They can be used where space is limited or when the action can be clearly recognized solely with by the icon. When using Icon buttons, be sure to use well-known standard symbols to avoid any ambiguity.

A selection of Icon buttons: primary, secondary and ghost.

Icon buttons are available in sizes medium (40 px), small (32 px) and extra small (24 px). The larger sizes (large and extra large) are not available to the Icon only option.

Behavior

Scaling and adaptation

When designing, buttons (excluding icon only-buttons) may be extended to align to grid or fill a content area horizontally, or alternatively the width is determined by the contents of the button.

Align to grid

Hug content