This is the staging site of seb.io, The Green Design System is work in progress and not ready to use, but feel free to explore!

Button

Buttons are an essential element of interaction design. Their primary role is to help people take actions quickly.

work in progress
form
button group
Interactive Button

UX text

The button text should answer the question "What is happening?" when the user clicks it, but if the purpose of the button is to convert, it should answer the question "What do I get?".

Use commands and requests in the button

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 a row. In special cases, the button may consist of another type of text, for example, This solution suits me.

Avoid Perform and Okay

Avoid using words like Perform (Utför) and Okay (Okej) in buttons. Perform is too formal and Okay is too vague and doesn’t answer the question “What is happening?” when the user clicks the button.

Standard button texts

Standard text for our most commonly used buttons.

Next (Nästa)
Back (Tillbaka)
Cancel (Avbryt)
Delete (Ta bort)
Change (Ändra) – takes the user to edit mode.
Save (Spara)
Close (Stäng) – closing a dialog, modal, slide-out etc.
Sign (Signera) – signing with BankID.
Identify yourself (Identifiera dig) – identifying with BankID.

Cancel and close

It is important to avoid confusion for the user which button to click. The combination Cancel and Close is very similar. Instead, use Back as the secondary action when primary action is Cancel.

This is a good example of avoiding confusion for the customer.

Do’s and don’ts

Do

  • Answer the question “What is happening?” or “What do I get?”.
  • Use commands or requests in the button.
  • Use Back as secondary action in modals where primary actions is Cancel.

Don’t

  • Avoid the formal Perform (Utför) and the vague Okay (Okej).
  • Do not use primary and secondary button text that is too similar to each other.
DO
DON'T