Buttons
Buttons allow users to take action with a single click or tap.
Guidelines
The EDS has primary, secondary and danger colour buttons available in the contained, outlined and ghost variations. All variations can have the following: an icon on the right, an icon on the left, an icon with no text and text only with no icon. When using an icon, it must be directly related to the action and label of the button.
Button vs link
A button is used when performing an action. Actions are almost always on the same page. A link is used when navigating to another place.
Button width
Buttons have a minimum padding that is automatically built into the component. You can however stretch the button to span one or multiple columns in width.
Button labels
Avoid labels that are too long. Titles should be to the point and short, no more than three words. Don´t wrap text over multiple lines, scale the width to make the text fit on one line. Don´t adjust the height of the button.
Buttons with a left or right icon
Buttons can use an icon to help clarify an action. Always use icons that clearly communicate their intended purpose.
Variations
Contained buttons
Contained buttons have high-emphasis and should be used for primary actions when possible.
Do not used two contained buttons next to each other. When grouping, use an outlined or text button with a contained button. To comply with accessibility guidelines, all interactive components must have a minimum of 8px between them. This is to prevent users from accidentally clicking the wrong place.
Contained buttons are found in the following variations:
- Primary colour
- Contained, only text
- Contained with icon on right of text
- Contained with icon on left of text
- Secondary colour
- Contained, only text
- Contained with icon on right of text
- Contained with icon on left of text
- Danger colour
- Contained, only text
- Contained with icon on right of text
- Contained with icon on left of text
- Disabled
- Contained, only text
- Contained with icon on right of text
- Contained with icon on left of text
Outlined buttons
Outlined buttons have medium-emphasis and should be used for important actions when possible.
Outlined buttons can be grouped with other outlined buttons as well as with contained and text buttons. To comply with accessibility guidelines, all interactive components must have a minimum of 8px between them. This is to prevent users from accidentally clicking the wrong place.
Outlined buttons are found in the following variations:
- Primary colour
- Outlined, only text
- Outlined with icon on right of text
- Outlined with icon on left of text
- Secondary colour
- Outlined, only text
- Outlined with icon on right of text
- Outlined with icon on left of text
- Danger colour
- Outlined, only text
- Outlined with icon on right of text
- Outlined with icon on left of text
- Disabled
- Outlined, only text
- Outlined with icon on right of text
- Outlined with icon on left of text
Ghost buttons
Ghost buttons have a low-emphasis and are typically used for less-important actions or multiple actions of the same importance.
Ghost buttons can be grouped with other text buttons as well as with contained and outlined buttons. To comply with accessibility guidelines, all interactive components must have a minimum of 8px between them. This is to prevent users from accidentally clicking the wrong place.
Ghost buttons are found in the following variations:
Primary colour
- Ghost, only text
- Ghost with icon on right of text
- Ghost with icon on left of text
- Ghost icon, no text
Secondary colour
- Ghost, only text
- Ghost with icon on right of text
- Ghost with icon on left of text
Danger colour
- Ghost, only text
- Ghost with icon on right of text
- Ghost with icon on left of text
Disabled
- Ghost, only text
- Ghost with icon on right of text
- Ghost with icon on left of text
Examples
Primary colour
Secondary colour
Danger colour
Disabled colour
