Button

Buttons allow users to take actions, and make choices, with a single tap.

Short description

When you tap a button, or select a button that has focus, the button performs any actions attached to it. Buttons can look like a pressable button or as a link. 

  • To be consistent, all buttons should have the same shape and aim to have the same width.
  • If there is only one button, make it primary. In a set of multiple buttons, the positive button is primary (i.e. takes the user further in a flow).
  • Use the secondary button when there is a set of buttons and an other button is primary.

When and how to use it

Use the button variations to emphasise the right amount. 

1. Primary button (high emphasis)

This button is highlighted in blue to draw the users attention to it.

2. Secondary button (medium emphasis)

When you have many buttons, use the secondary buttons to give them equal attention. 

3. Ghost button (medium emphasis)

The ghost button is used on coloured background and photographs. It is transparent with an white or Grey 8 outline. The colour for the hover state is inverted. Use Ghost Light on darker backgrounds, and Ghost Dark for lighter backgrounds. Example

 

4. Button link (low emphasis)

Button link looks like a link but has the same clickable area as a button. It is used when we don't want the button to stand out. Used to be called "Alternative button".

5. Delete button

Use these three in situations when the action the user is about to do is irreversible, like "Delete account". 

Sizes

There are different sizes of buttons for different contexts; Default (most commonly used), Small (for use in tables and lists), Large (for use when highlighting a startpoint of something) and Mobile. 

Labels

  • Button labels tell users what will happen when they click on the button. Use verbs that describe the action (Add, Delete, etc). Keep the text short - try to use no more than three words.
  • For sets of buttons, use specific labels, such as Save or Discard, instead of using OK and Cancel. This is particularly helpful when the user is confirming an action.

Icon usage

  • Use icons (FontAwesome) within buttons.
  • Icons can appear to the left or right of the text.
  • Icons must be directly related to the action that the user is taking.
  • Icons must be the same colour value as the text within the button.

Button placement

A general rule is to always strive to place buttons in connection to the items they control. 

Right - Standard dialogues, flows, take over modals, dialogue modals and slide-out modals
  • Align the buttons to the right of the screen
  • Place the affirmative button on the right, the dismissive button on the left.

Wizard flow in Take-over modal (above)

Dialogue modal (above)

Left - Forms
  • In forms, align the buttons to the left of the screen
  • In forms, place the affirmative button on the left, and the dismissive button on the right

Form (above)

Mobile
  • If there is only one button, use the full width of the screen (with margins)
  • If there are two buttons, aim to place them side by side. It is allowed to stack them if needed
  • If there are three buttons, consider the need for all of them. "Cancel/close" might be x in the top right corner. Worst case scenario: place them two buttons side by side (top) and one button full width (bottom)

Two buttons in a mobile view (above)

Delete-button

The "Delete button" should be used only in cases when the action the user is about to do is irreversible. For example, with button call-to-actions like "Delete", "Block card" and so on.

  1. When the Delete button is one of many choices (not the primary one), use the "Delete button standard" (with or without icon).
  2. When pressed, you get a confirmation dialogue where the negative action now is the primary one in the interface. Then use the "Delete button confirm" which has a solid red background.

Delete button standard (above)

Delete button confirm (above)

 

Do's and don'ts

Don't

  • Do not use inactive buttons if it can be avoided. Instead, inform the user of what can be done to proceed. Use inactive buttons only in exceptional cases.
  • Avoid having too many primary buttons. One is preferable.

 

States

Focus state

Colours

Primary button
  • Text: White
  • Background, normal state: Dark blue 1
  • Hover state: Blue
  • Selected state: Dark blue 2
  • Pressed state: Blue
  • Disabled state: Grey 200

 

Secondary button
  • Text: Dark blue 2
  • Background, normal state: White with border Dark blue 1 
  • Hover state: Blue
  • Selected state: Dark blue 2
  • Pressed state: Blue
  • Disabled state: Grey 200

 

Button link
  • Text: Dark blue 2
  • Background, normal state: Transparent
  • Hover state: Blue
  • Selected state: Dark blue 2
  • Pressed state: Blue
  • Disabled state: Grey 200

 

Ghost button light/dark
  • Text: White/Grey 800
  • Background, normal state: Transparent with border White/Grey 800
  • Hover state: White/Grey 800
  • Selected state: White/Grey 800
  • Pressed state: White/Grey
  • Disabled state: Transparent with border Grey 200

 

Delete button

Colours
  • Normal: Dark Red 1
  • Hover: Red
  • Selected/Highlighted: Dark Red 2
  • Pressed: Dark Red 1
  • Disabled: As all disabled buttons (Grey 200 on background, Grey 300 on text)

 

Sizes

There are different sizes of buttons for different contexts, ranging from 2 rem (32 px) to 4 rem (64 px). 

Default - height 44 px

Most commonly used. 

Small - height 32 px

Use in tables and lists. 

Large - height 64 px

Use when highlighting a starting point of something, such as a welcome, onboarding, introduction. 

Mobile - Height 44 px

Allt the states, sizes and variations

Default buttons

Small buttons

Large buttons

Mobile

 

Examples of use

(Above) The component Hook-guide-act in several colours, with a ghost button on coloured background.