Short description

Buttons communicate actions that users can take.

When and how to use them

Differentiate the buttons in the context if you have more than one action. Primary buttons require the most attention from your users. Secondary, as the name says, is the second most likely choice.

• Put buttons where users expect to find them.
• Label buttons with what they do.
• Use only one primary action if possible.

1. Primary button, 2. Secondary button, 3. Tertiary button, 4. Ghost button, 5. Delete button, 6. Sell button, 7. Split button, 8. Up button, 9. Close button, 10. Icon button

Button placement

Buttons are placed throughout your UI, in places like dialogs, modals, forms, cards and toolbars.

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 tends 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

1. Primary button

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

2. Secondary button

The secondary button is 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. Tertiary button

Used to be called text button or button link. The tertiary button 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 be a tertiary button.

4. Ghost button

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.

5. Delete buttons

The delete button is used for actions that cannot easily be undone by the user. To reach accessibility, always use both label and icon left in order make it clear that this button is designed to be destructive.

The delete button has two types. When users take this action, include an additional step in a dialogue modal where the user need to confirm the action. In this step, the delete button is solid red to clearly stand out to be the primary action in the modal. Also give the user the possibility to cancel the delete with a secondary button alternative.

Read about the Delete-pattern

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.

• Note that the colours have no gradient for desktop and hybrid. There is an exception made for mobile native buttons.

Read about the Buy and sell-pattern

7. Split button

A split button groups related commands together into a list of actions and offers one-click access to a default choice that doesn't require opening the list. Split buttons are used when there are many actions available for the user, but not the space or real-estate to have individual buttons for each action. The list of options can be opened above or below the button and may overflow to either side of the button width, based on where the button is placed on the screen or in the flow. Avoid more than one split button in each flow.

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

9. 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 label. Close to the left of the icon. In mobile, the icon has the background circle default.

10. Icon button

The icon button may only be used when the icon is commonly known since it doesn't have a label. Only use when space is very limited. Very wise to use a hover-effect with a tooltip stating what action will be taken.

Rules of thumb

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?”.

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, Submit 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 and Ok

Avoid using words like Utför/Perform (too formal) and Ok (too vague) on buttons. 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.

Upper and lower case

Don't start each word in headings and labels with upper case. Only use upper case in:

• The first letter of the first word
• The first letter of proper names
• Abbreviations

Standard buttons

Use the standard buttons for reoccurring actions like these:

• 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.
• Signera/Sign – The user is signing with BankID.
• Identifiera dig/Identify yourself – The user is identifying themselves with BankID

Examples of button text

Remember alt texts!

Colours used

Accessibility will be met for those who can not see colours, the primary button has a solid background. The secondary only a border and the tertiary has neither.

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.

Review

Result from the latest accessibility review of the component (All): 2023-06-13

• Contrast: ok
• Colour-blindness: good
• Code + aria: ok
• Touch + keyboard: good
• Dark-mode: n/a
• Focus: ok - need new style
• Reader: ok

• Details: Specification in Figma
• Instruction: How to access Figma