Vanilla
CSS/SCSS
The last version of Internet Explorer, version 11, was released on October 17, 2013. This is a very long time ago when taking into account the rapid development of web technologies. These days it is often difficult and time consuming to get modern technologies to work well in this old browser. More and more frameworks are dropping support, and even Microsoft themselves has announced that they will fully drop support for IE in their own services in 2021.
Consequently, we have decided to not include support for IE in the Design Library website.
Luckily, there are modern options in active development. Please use Firefox, Edge or Chrome instead.
Buttons allow users to take action with a single tap.
CSS/SCSS
CSS/SCSS
Typescript
Typescript
CSS/SCSS
Buttons allow users to take action with a single tap.
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
Read about icon and label placement: Pattern: Icons and actions
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.
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.
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 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.
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.
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?”.
Write
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.
Minimum 96 px
44 px (2,75 rem)
Desktop
Mobile
Button variations
Use this highlighted button for the primary call-to-action. Strive to use only one primary button in the same context.
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).
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.
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.
Use the delete buttons when the action the user is about to do is irreversible.
Read about the Delete-pattern
Delete button link
Delete button link with icon
Confirm delete button
Icon colour = same as button text colour
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
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.
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.
Animation:
Hover/focus
States
States
Read about Pattern: Dark mode
https://www.figma.com/file/dX0HJ2MOaQyAOTziCD5fQ7/SEB-Design-System?node-id=2935%3A18791