Button

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

Guidelines

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.

Usage

Use the button variations to emphasise. 

  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 2 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 this in situations when the action the user is about to do is irreversible, like "Delete account". 

Sizes

There are three sizes of buttons for different purposes:

  • Default - (medium) most commonly used. Height 44 px, mini-width 96 px.
  • Small - use in tables and lists. Height 32 px, mini-width 96 px.
  • Large - use when highlighting a starting point of something, such as a welcome, onboarding, introduction. Height 64 px, mini-width 210 px.
  • Mobile - Height 44 px

 

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

  • Always strive to place buttons in connection to the items they control.

Standard dialogues

  • In standard dialogues, align the buttons to the right of the screen
  • In standard dialogues, place the affirmative button on the right, the dismissive button on the 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

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)

 

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.

Above: Example with Delete button standard 

Above: Exampel with Delete button confirm

 

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

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 8

 

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 8

 

Button link

(Button link used to be called Alternative button. Will be updated in images soon.)

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

 

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

 

Delete button

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

 

Sizes

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

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.