Short description

Buttons allow users to take action with a single tap.

When and how to use them

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

See the button variations below under "Specification".

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 and 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 try to only have one primary button

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

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

Button variations

1. Primary button

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

• Text: White
• Default background: Dark blue 1
• Hover: Blue
• Pressed: Blue
• Disabled: Grey 200
• Disabled text: Grey 500
• Focus background: Dark Blue 2
• Focus gradient: 4 px outline in Blue, box-shadow: 0 0 4px 1px in Blue

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

• Text: Link colour #0062BC
• Default background: Transparent
• Default border: Dark blue 2
• Hover: Blue
• Pressed: Blue
• Disabled: Grey 200
• Disabled text: Grey 500
• Focus: Gradient 4 px outline in Blue, box-shadow: 0 0 4px 1px in Blue

3. Ghost button (medium emphasis)

This button is mostly used on a coloured background 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.

3.a Ghost button light

• Text: White 
• Default background: Transparent
• Default border: White
• Hover background: White
• Hover text: Dark Grey 800
• Pressed: White
• Disabled background: Grey 200
• Disabled text: Grey 500
• Focus background: White
• Focus gradient: 4 px outline in Blue, box-shadow: 0 0 4px 1px in Blue

3.b Ghost button dark

• Text: White
• Default background: Transparent
• Default border: White
• Hover background: White
• Hover text: Dark Grey 800
• Pressed: White
• Disabled background: Grey 200
• Disabled text: Grey 500
• Focus background: White
• Focus gradient: 4 px outline in Blue, box-shadow: 0 0 4px 1px in Blue

4. Button link

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.

• Text: Link colour #0062BC
• Default background: Transparent
• Hover: Blue
• Pressed: Blue
• Disabled: Grey 200
• Disabled text: Grey 500
• Focus: Gradient 4 px outline in Blue, box-shadow: 0 0 4px 1px in Blue

5. Delete button (standard, confirm)

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

• Text default: Red dark 1
• Default background: Transparent
• Hover: Red
• Pressed: Red
• Confirm background: Red Dark 1
• Confirm text: White
• Disabled: Grey 200
• Disabled text: Grey 500
• Focus background: Red Dark 2
• Focus gradient: 4 px outline in Blue, box-shadow: 0 0 4px 1px in Blue

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.

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

• Default background: #D83C3C
• Default text: White
• Hover: #C32727
• Pressed: #C32727
• Disabled on background: Grey 200
• Disabled on text: Grey 500
• Focus background: #C32727
• Gradient: 4 px outline in Red Box-shadow: 0 0 4px 1px in Red

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").

• Default background: Transparent
• Default icon: Blue Dark 2
• Hover background: Blue
• Hover icon: White
• Pressed: Blue Disabled on background: Grey 200
• Disabled icon: Grey 500
• Focus background: Dark Blue 2
• Focus gradient: 4 px outline in Blue, box-shadow: 0 0 4px 1px in Blue

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.

States

Desktop

• Default background: Transparent
• Default icon: Grey 800
• Hover background: Grey 200
• Hover icon: Grey 800
• Focus background: Grey 200
• Focus gradient: 4 px outline in Blue, box-shadow: 0 0 4px 1px in Blue

Mobile

• Default circle background: Grey 200

9. Up button

Read about Up-button

States

To be described.

Colours

• Blue
• Dark blue 1
• Dark blue 2
• Grey 200
• Grey 300
• Grey 500
• Grey 800
• White
• Transparent
• Red
• Dark red 1
• Dark red 2

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.