Back to components

Button

Buttons express what action will occur when the user clicks or touches it. Buttons are used to initialize an action, either in the background or foreground of an experience.

Table of Contents

Edit this section, Opens in new window

Overview

Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. Button labels express what action will occur when the user interacts with it.

Edit this section, Opens in new window

Variations

Type Purpose
Primary button The primary button is the preferred call-to-action button.
Secondary button Secondary buttons are, secondary. They contain actions that are important, but not the primary action.
Text button Text buttons are buttons for actions that is of minimum importance.
Info button The info button is used for the rare occasion when you want a button that stands out, when the primary button is not natural to use. Use sparingly.
Edit this section, Opens in new window

Usage

Buttons communicate actions that users can take.

Principles

  • Buttons should indicate that they can trigger an action.
  • Buttons should be easy to find among other elements, including other buttons.
  • A button's action and state should be clear.

Text label

Text labels describe the action that will occur if a user taps a button. If a text label is not used, an icon should be present to signify what the button does. Text labels should be short, concise and descriptive.

Do not use long labels
Use short and distinct labels for the action

Sizing

Buttons have a minimum width of 48px, and a maximum width of 320px. Other than that, the width is set to grow with the length of the text.

Hierarchy and placement

A single primary button

A layout/view should contain a single primary button that makes it clear that other buttons have less importance in the hierarchy. This primary button commands the most attention.

Other buttons

An view can show more than one button in a layout at a time, so a primary button can be accompanied by secondary or text buttons that perform less important actions.

Placement
Do not use two or more primary buttons together
Only use one primary button per view

On backgrounds

B1

B3

B4

Types

Primary button

The primary button is used for primary action. Use sparingly.

The primary button is a filled button. The fill color used is BL 1, BLUE. The text color is BE 5, LIGHTEST BEIGE.

Secondary button

The secondary button is the default button. It is used for non-primary actions.

The secondary button is an outlined button. The outline and text color is BL 1, BLUE.

Text button

The text button is a button used for miniscule actions, or when a solid button is not wanted.

The text color is BL 1, BLUE.

Info button

The info button is used for the rare occasion when you want a button that stands out, when the primary button is not natural to use. Use sparingly.

The info button is a filled button. The fill color used is BR 1, BROWN. The text color is BE 5, LIGHTEST BEIGE.

With icons

All buttons can have icons.

Placement

It is preferred that icons are placed to the left of the text. In some occasions, like with navigational buttons, you can place arrows to the right.

Do not place icons to the right of the text
But you can do it with arrows
Place icons to the left of the text

An outlined BL 1, BLUE icon in a secondary button.

An outlined BE 5, LIGHTEST BEIGE icon in a primary button.

An outlined BL 1, BLUE icon in a text button.

An outlined BE 5, LIGHTEST BEIGE icon in an info button.

A BE 5, LIGHTEST BEIGE loader in a primary button.

Edit this section, Opens in new window

Primary button

The primary button is the preferred call-to-action button. The button is used to dictate what the primary action of a view is. Never use more than one primary button for one view.

States

Enabled

Disabled

Active

Hovered

Focused

Hover + focus

If you see that the button grows in width when it is active (clicked), this is because we increase the font-weight of the text inside the button. To circumvent this, the only good solution as of now is to set the button to a fixed width.
Edit this section, Opens in new window

Secondary button

Secondary buttons are, secondary. They contain actions that are important, but not the primary action.

States

Enabled

Disabled

Active

Hovered

Focused

Hover + focus

If you see that the button grows in width when it is active (clicked), this is because we increase the font-weight of the text inside the button. To circumvent this, the only good solution as of now is to set the button to 320px width (320px),
Edit this section, Opens in new window

Text button

Text buttons are buttons for actions that is of minimum importance.

States

Enabled

Disabled

Active

Hovered

Focused

Hover + focus

If you see that the button grows in width when it is active (clicked), this is because we increase the font-weight of the text inside the button. To circumvent this, the only good solution as of now is to set the button to 320px width (320px),
Edit this section, Opens in new window

Info button

The info button is used for the rare occasion when you want a button that stands out, when the primary button is not natural to use. Use sparingly.

States

Enabled

Disabled

Active

Hovered

Focused

Hover + focus

If you see that the button grows in width when it is active (clicked), this is because we increase the font-weight of the text inside the button. To circumvent this, the only good solution as of now is to set the button to 320px width (320px),
Edit this section, Opens in new window

Specs

Normal sized button
Edit this section, Opens in new window

Anatomy

Secondary button
  1. Text label, Box is inverse filled and with outline
Secondary button
  1. With icon
Text button
  1. Text label, Box is not filled and no outline
Primary button
  1. Text label, Box is filled
Info button
  1. Text label, Box is filled
Edit this section, Opens in new window
Contact us, Opens in new window