Components
Button
Buttons are clickable elements that trigger events or actions. They communicate actions to the users and allow them to interact with our interfaces in a variety of ways.
Interactive demo
This demo lets you preview the button component and its variations. Each tab displays a different type of button.
<CodeViewerExample> <Button inverted> Button </Button> </CodeViewerExample>
Usage
Principles
Button types
There are 2 different types of buttons. Each type is available in different sizes and can be modified according to the rules specified under the “Modify” section.
Buttons can be themed in different ways. The default color theme is neutral. Follow the guidelines regarding theming in the “Color theme” section.
Formatting
Anatomy
Buttons contain one required element and, at least, one optional element.
- Primary button
a. Icon
b. Text label
c. Container (required) - Secondary button
a. Icon
b. Text label
c. Container (required)
Button sizes
Button-300 is the default size for buttons and should always be used unless otherwise specified.
Emphasis
It is important to establish a visual hierarchy between the buttons in your user-interface. As a general rule, a layout should only contain a single high-emphasis button that makes it clear that other buttons have less importance in the hierarchy. The high-emphasis button commands the most attention. A high-emphasis button can be accompanied by a medium-emphasis buttons, secondary buttons, that can perform less important actions.
Text labels
One line text labels
To secure good legibility, a text label should be placed on one line and not be wrapped on multiple lines. If you have narrowed width space to place your button, move it below the associated content.
Modifiers
Buttons with icons
Icons can be placed in a button to guide the user and to enhance the experience.
The icon can be placed to the left, or to the right of the text. The icon can be close to the text or aligned with the edge of the button.
An icon can also be placed in a button without a text label. If this is the case, it’s important to make sure the icon is self-explanatory, clear to the user and that the button is placed in a context in which the button doesn’t need an explanation.
- Icon left
- Icon right
- Icon far left
- Icon far right
- Icon only
One icon per button
To make a button clear and intuitive, only use one icon per button.
Color theme
The default theme is neutral but if the action requires a logged in status, such as money transfer, a purchase, signing an agreement and so forth, use theme “Tur” or “Sport & Casino” (depending on what business area you are working with).
As button themes are applied, it is important to consider the contrast between the button and the background it is placed upon.
Note that the neutral theme has one version for light backgrounds and one for dark backgrounds.
Primary button
- Neutral on bright background
- Neutral on dark background
- Tur
- Sport & Casino
Secondary button
- Neutral on bright background
- Neutral on dark background
Border of secondary buttons
Secondary buttons can have two different border thickness. Thin borders for buttons are only used for business area Svenska Spel Sport & Casino.
Behavior
Scaling and adaptation
When scaling layouts for large screen devices, buttons can adapt their visual presentation, alignment, and arrangement to fit different contexts and user needs.
Buttons can align to grid or adapt to the content of the button and be aligned left, right or center.