Button

Buttons allow users to take action 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.

When and how to use 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.

Button variations

Use the button variations below to emphasise the right amount. 

1. Primary button (high emphasis)

  • This button is highlighted in blue to draw the users attention to it.
  • 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).

2. Secondary button (medium emphasis)

  • When you have many buttons, use secondary buttons to give them equal attention. 
  • Use the secondary button when there is a set of buttons and an other button is primary.

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 buttons in situations in a delete-pattern, when the action the user is about to do is irreversible, like "Delete account", "Block account", etc.

 1. Delete button - standard

When the Delete button is one of many choices (not the primary one), use the "Delete button standard", with or without the icon.

 2. Delete button - confirm

After pressing, you get a confirmation dialogue where the negative action now is the primary one in the interface. Use the "Delete button confirm", which has a solid red background.

6. More-button

Use this button to trigger the overflow menu. The overflow menu gives users all the option that you can’t fit in the regular view (or perhaps don’t want to give to much emphasis). The more button uses the fold-out-modal. The button is often used in the top-right corner of a widget, or at the end of a table-row.

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. See the specification for details.

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.

 

Placement

A general rule is to always strive to place buttons in connection to the items they control. Modals and flows move the user from left to right, therefore the buttons are placed to the right. In overviews and widgets, the user tend to read from top to bottom, therefore the buttons are kept to the left.

Placed to the right

  • Align the buttons to the right under the content
  • Place the affirmative/primary button on the right, the dismissive/secondary button on the left
  • Used for modals (Dialogue, Slide-out, Take-over) and flows (such as wizards)

Placed to the left

  • Align the buttons to the left under the content
  • Place the affirmative/primary button on the left, and the dismissive/secondary button on the right
  • Used on basic/overview pages, widgets or when content is mostly on the left side of the page

Mobile

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

Do's and don'ts

Don't

  • Do not use inactive buttons if it can be avoided. Instead, take the opportunity to 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: Transparent 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.