Short description

Buttons are generally used for triggering actions, for example "Log in", "Submit form", "Post comment", "Set up a savings account", "Become a customer".

When and how to use them

Button variations

1. Primary button (high emphasis)

Use this highlighted button for the primary call-to-action. Strive to use only one primary button in the same context.

2. Secondary button (medium emphasis)

The secondary button is most often used together with a primary button. For example in a step flow the Next button is primary, whilst the Previous button is secondary. This is because we want to lead the user forward. Another example is  in a context where a customer must be able to get the help they need. Become a customer (Primary) or Already a customer (Secondary).

3. Ghost button (medium emphasis)

This button is mostly used on a coloured backround or a photo. There is a light and a dark version to be visible on different backgrounds. On public web, the ghost button is used for primary actions more frequently to make a difference between buttons that links to a logged-in environment.

4. Button link (low emphasis)

Button link can be used in a flow where we already have a primary Next button and a secondary Previous button, and also need a Cancel option. The Cancel option would fit in as a button link.

5. Delete button

Use the Delete-pattern when the action the user is about to do is irreversible, like "Delete account" or "Block account". The default state looks like a button link (in red) with or without and icon. A delete button always trigger a modal, where the user needs to confirm to delete and have the choice to change his mind. In the modal the delete button will be solid red and the primary action in this case. (In a dropdown we add a red hover state on the delete option.)

6. Sell button

This button is only used in the context of buy and sell. The red colour is a bit different from the red used on the delete button. The reason for this is to tone down the alert-feeling on the sell button, but still let it be obvious that it is something we discard.

Read about the Buy and sell-pattern

7. More button

Use the More-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. When it needs a label, consider using Options or Actions ("Välj").

8. Close button

Use the close button to allow the user to close and exit current contexts (slide-out, slide-up, wizard, etc) in both desktop, hybrid and mobile contexts. Place it in the top right corner.

When the space is available, you can choose to add the lable Close to the left of the icon.

9. Up button

To be described, Jessi :)

Read about Up-button

Features

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

Read about icon label placement: Pattern: Icons and actions

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

• 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.

Measurements

Desktop

Width

• Minimum 96 px

Height

• Default: 44 px (2,75 rem) - most commonly used
• Small: 32 px (2 rem) - tables and lists
• Large: 64 px (4 rem) - highlights a starting point (welcome, onboarding, introduction, etc)

Mobile

Width

• If one button, use the full width of the screen (with margins)
• See Guidelines above for more on mobile button placement

Height

• 44 px (2,75 rem)

Above: Default, small, large and mobile buttons

1. Primary button

States

• Text: White
• Default: Dark blue 1
• Hover state: Blue
• Selected: Dark blue 2
• Pressed: Blue
• Disabled: Grey 200
• Disabled text: Grey 500

• White
• Blue
• Dark blue 1
• Dark blue 2
• Grey 200
• Grey 500

Focus

• Gradient 4 px outline in Blue, box-shadow: 0 0 4px 1px in Blue

2. Secondary button

States

• Text: Dark blue 2
• Default background: Transparent
• Default border: Dark blue 1
• Hover state: Blue
• Selected state: Dark blue 2
• Pressed state: Blue
• Disabled: Grey 200

• Transparent
• Blue
• Dark blue 1
• Dark blue 2
• Grey 200

Focus

• Focus: Gradient 4 px outline in Blue, box-shadow: 0 0 4px 1px in Blue

3.a Ghost button light

States

• Text: White
• Default background: Transparent
• Default border: White
• Hover: White
• Selected: White
• Pressed: White
• Disabled background: Transparent
• Disabled border: Grey 200

• White
• Transparent
• Grey 200 

3.b Ghost button dark

States

• Text: Grey 800
• Default background: Transparent
• Default border: Grey 800
• Hover: Grey 800
• Selected: Grey 800
• Pressed: Grey 800
• Disabled: Transparent
• Disabled border: Grey 200

• Transparent
• Grey 800
• Grey 200

4. Button link

States

• Text: Dark blue 2
• Default background: Transparent
• Hover state: Blue
• Selected: Dark blue 2
• Pressed state: Blue
• Disabled state: Grey 200

• Transparent
• Blue
• Dark blue 2
• Grey 200

5. Delete button (Standard, Confirm)

States

• Normal: Dark red 1
• Hover: Red
• Selected: Dark red 2
• Pressed: Dark red 1
• Disabled on ?? background: Grey 200
• Disabled on ??? text background: Grey 300

• Red
• Dark red 1
• Dark red 2
• Grey 200
• Grey 300

Focus

• Gradient 4 px outline in Red
• Box-shadow: 0 0 4px 1px in Red

6. Sell button

States

• Normal: #D83C3C
• Hover: #C32727
• Pressed: #C32727
• Disabled on background: Grey 200
• Disabled on text: Grey 300

• Red
• Grey 200
• Grey 300

Focus

• Gradient 4 px outline in Red
• Box-shadow: 0 0 4px 1px in Red

• The measurements are the same as the primary button.
• Note that the colours have no gradiant for desktop and hybrid. There is an exception made for mobile native buttons.

States

The sell-button

• Normal/Default: #D83C3C
• Hover: #C32727
• Focused: box-shadow: 0 0 4px 1px #F03529
• Pressed: #C32727

• Disabled: Grey 200

The buy-button

The blue button is a primary button.

7. More button

• ?

8. Close button

States

Desktop

• Default background: White
• Hover background: Circle in Grey 200

Mobile

• Default circle backgroundt: Grey 200

• White
• Grey 200 

Up button

States

To be described.

Dark mode

Read about Pattern: Dark mode 

Self-explanatory buttons

Phrase the text on the buttons so that it is evident for the user what happens when they click on it. If the button leads to another page, links are often preferred instead.

Use verbs in the imperative mood

You should primarily use verbs in the imperative mood, which is the form of the verb that conveys commands or requests, for example Order, Apply and Sign. If needed you can add what happens, for example Write a new message or Add row. In special cases, the button may consist of another type of text, for example This solution suits me.

Avoid Utför (Perform) and Ok

Avoid using words like Utför (perform) and Ok on buttons. Utför is stiff and old-fashioned. Ok doesn’t say anything about what happens when the user clicks the button. If the button is shown in a dialogue or modal, it is better to write Stäng (Close) than Ok.

Example

When the customer is making a payment and is searching for the Bic code for the receiving bank, it is better to write Hämta (Fetch) than Ok, since Hämta more clearly explains what happens when the user presses the button.

Tips for when buttons are supposed to convert

As a rule, the text on a button should answer the question “What happens?”, but if the purpose of the button is to convert, it should answer the question “What do I get?”.

Reoccurring buttons

Write

• Nästa/Next – Takes the user to the next step in a flow.
• Tillbaka/Back – Takes the user to the previous step in a flow or aborts the action in dialogues and slide outs.
• Avbryt/Cancel – Aborts the action.
• Ta bort/Delete – Deletes something. Often in red text and accompanied by an illustration of a trash can.
• Ändra/Change – When the user wants to change something.
• Spara/Save – When the user wants to save something, for instance a change.
• Stäng/Close – To close a dialogue, modal, slide out etc.

Remember alt texts!

From an accessibility perspective, it is important to assign an alt text to every button. This is extra important on pages where there are a lot of buttons with identical text, for example on overview pages where there are several Apply buttons. In those cases, the alt text should read “Apply for A”, “Apply for B” and so on.

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 mostly used on coloured background and photographs. It is transparent with an white or Grey 8 outline. The colour for the hover state is inverted. Generally, use Ghost Light on darker backgrounds, and Ghost Dark for lighter backgrounds.

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.

 a. 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.

 b. 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. Sell button

This red button helps the user differentiate between buy and sell-actions in for instance, a funds or share-list. Note that red colour #D83C3C is different from the Delete-button to connotate "different, but not error".

Read about Buy and sell-buttons

7. More button

Use the More-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. When it needs a label, consider using "Options" or "Actions" ("Välj"). 

8. Close button

Use the close button to allow the user to close and exit current contexts (slide-out, slide-up, wizard, etc) in both desktop, hybrid and mobile contexts. Place it in the top right corner.

On desktop, make the background white with a grey circle on hover. In touch devices, show the grey circle background as default, to visualise a greater tap area.

Features

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

Read about icon label placement: Pattern: Icons and actions

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

• 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.