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.

Interactive demo

This demo lets you preview the button component and its variations. Each tab displays a different type of button.

<CodeViewerExample>
  <Button inverted>
    Button
  </Button>
</CodeViewerExample>

Usage

Principles

Identifiable

Buttons should indicate that they can trigger an action.

Findable

Buttons should be easy to find among other elements, including other buttons.

Clear

A button’s action and state should be clear.

Button types

There are 2 different types of buttons. Each type is available in different sizes and can be modified according to the rules specified under the “Modify” section.

Buttons can be themed in different ways. The default color theme is neutral. Follow the guidelines regarding theming in the “Color theme” section.

Primary button

Primary buttons are used whenever there is a need for call to action.

There should only be one primary button, in a specific context, that calls for the user's attention.

Secondary button

Secondary buttons are used for less prioritized actions such as “Cancel” and “Back”.

An interface can be populated by multiple secondary buttons.

Regarding the thickness of the border, follow the guidelines under “Border of secondary buttons” in the “Modify” section.

Formatting

Anatomy

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

1. Primary button
   a. Icon
   b. Text label
   c. Container (required)
   
2. Secondary button
   a. Icon
   b. Text label
   c. Container (required)
   

Button sizes

Button-300 is the default size for buttons and should always be used unless otherwise specified.

Size 300

Size 100

Emphasis

It is important to establish a visual hierarchy between the buttons in your user-interface. As a general rule, a layout should only contain a single high-emphasis button that makes it clear that other buttons have less importance in the hierarchy. The high-emphasis button commands the most attention. A high-emphasis button can be accompanied by a medium-emphasis buttons, secondary buttons, that can perform less important actions.

Text labels

One line text labels

To secure 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.

Do

Text on single line

Don't

Text on multiple lines

Short and direct text labels

Do

Short and direct text labels

Don't

Long and complicated text labels

Modifiers

Buttons with 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. The icon can be close to the text or aligned with the edge of the button.

An icon can also be placed in a button without a text label. If this is the case, it’s important to make sure the icon is self-explanatory, clear to the user and that the button is placed in a context in which the button doesn’t need an explanation.

1. Icon left
2. Icon right
3. Icon far left
4. Icon far right
5. Icon only

One icon per button

To make a button clear and intuitive, only use one icon per button.

Do

One icon per button

Don't

Two icons in the same button

Alignment of icons and labels

Do

Align the icon and label horizontally

Don't

Vertically align an icon and text in the center of a button

Color theme

The default theme is neutral but if the action requires a logged in status, such as money transfer, a purchase, signing an agreement and so forth, use theme “Tur” or “Sport & Casino” (depending on what business area you are working with).

As button themes are applied, it is important to consider the contrast between the button and the background it is placed upon.

Note that the neutral theme has one version for light backgrounds and one for dark backgrounds.

Primary button

1. Neutral on bright background
2. Neutral on dark background
3. Tur
4. Sport & Casino

Secondary button

1. Neutral on bright background
2. Neutral on dark background

Border of secondary buttons

Secondary buttons can have two different border thickness. Thin borders for buttons are only used for business area Svenska Spel Sport & Casino.

Normal

Normal border thickness is 2 px.

Thin

Thin border thickness is 1 px.

Behavior

Scaling and adaptation

When scaling layouts for large screen devices, buttons can adapt their visual presentation, alignment, and arrangement to fit different contexts and user needs.

Buttons can align to grid or adapt to the content of the button and be aligned left, right or center.

Align to grid

Adapt to content

1. Button-300 has 12 px padding.
2. Button-100 has 6 px padding.