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

Button variations

Icon usage

• Only use icons (FontAwesome) within buttons when it can enhance or further explain the button.
• 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

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

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.

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)

Desktop

Mobile

Overview

Button variations

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 2
• Hover: Dark Blue 1
• Pressed: Dark Blue1
• Disabled background: 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: 1 px in Dark blue 2
• Hover: Dark Blue 1
• Pressed: Dark Blue 1
• Disabled border: Grey 500
• Disabled text: Grey 500
• Focus: Gradient 4 px outline in Blue, box-shadow: 0 0 4px 1px in Blue

3. Ghost buttons (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 border: Grey 500
• Disabled background: Transparent
• Disabled text: Grey 500
• Focus background: White
• Focus text: White
• Focus gradient: 4 px outline in Blue, box-shadow: 0 0 6px 1.5px in 90% White

3.b Ghost button dark

• Text: White
• Default background: Transparent
• Default border: White
• Hover background: White
• Hover text: Dark Grey 800
• Pressed: White
• Disabled border: 50% White
• Disabled text: 50% White
• Focus background: Grey 800
• Focus text: White
• Focus gradient: box-shadow: 0 0 6px 1.5px in Grey 700

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: Dark Blue 1
• Pressed: Dark Blue 1
• Disabled background: Transparent
• Disabled text: Grey 500
• Focus: Gradient 4 px outline in Blue, box-shadow: 0 0 4px 1px in Blue

5. Delete buttons

Use the delete buttons when the action the user is about to do is irreversible.

• The default state looks like a red button link, with or without an icon.
• The delete button link always triggers a modal, where the user needs to confirm to delete and have the choice to change their mind.
• In the modal, the confirmation delete button is solid red and the primary action. 

Read about the Delete-pattern

Delete button link

Delete button link with icon

Confirm delete button

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

Icon colour = same as button text colour

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 background: Grey 200
• Disabled 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. 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. 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.

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

8. Up button

The up button is a site feature to help the visitor to easier get back to the top of the current page. The button will be visible once the visitor scrolls past a certain amount of pixels (900 px by default), and starts an upward scroll motion. It then disappears again if the visitor clicks on it, or starts to scroll downwards again.

• Background colour: rgba(0,0,0,.5);
• Text colour: #fff
• Size on arrow: 14px

Animation:

• (translate icon -4px on the y-axis)
• transform: translateY(-0.25rem);
• transition: transform 0.3s ease 0s;

Hover/focus

• box-shadow: 0 0 0.25em 0.0625em hsl(0deg 0% 100% / 90%);
• transition: box-shadow .25s;

Desktop and mobile

States overview

States

States

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

Overview

Dark mode

Read about Pattern: Dark mode 

https://www.figma.com/file/dX0HJ2MOaQyAOTziCD5fQ7/SEB-Design-System?node-id=2935%3A18791