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.

Buttons in groups should always have the same color (primary, secondary, or danger), with an exception if one of the buttons are disabled. To emphasize and create a hierarchy you should use contained for high-emphasis actions, outlined for medium-emphasis, and ghost for low-emphasis.

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