Buttons
Buttons are used to trigger actions. Their appearance is depending on the type of action required from the user, or the context.
Variations
Color themes
We created different color themes to suit what you need in your design.
You can use primary (default), neutral and danger theme in solid and bordered declination. These declinations can help you to make what's important stand out.
| Color theme | Usage |
|---|---|
| Primary | For main actions on the page or engaging actions |
| Neutral | For secondary or minor actions on the page and for navigation buttons like the pagination |
| Danger | For buttons who the following actions is irrevocable, like deleting a product in a cart |
Sizes
There is 3 sizes for the buttons to create hierarchy and for a better adaptability.
| Size | Value |
|---|---|
| Small | 2mu (32px) |
| Medium (default) | 3mu (48px) |
| Large | 3.5mu (56px) |
Displaying buttons with icons
In the button component, you can also add icons:
- On the left
- On the right
- Icon only
Icons are availables in different sizes depending on the button size. Here you can find which icon you can use for each button size:
| Button size | Icon only | Icon + text |
|---|---|---|
| Small | 1.5mu (24px) | 1.5mu (24px) |
| Medium | 2mu (32px) | 1.5mu (24px) |
| Large | 2mu (32px) | 2mu (32px) |
Width behaviour
A button width can either fit its content or its container.
Do's and Don'ts
Use solid buttons to highlight the important actions.
Use only one primary button at the time in the user's field of view.
Use Bordered buttons for minor or secondary actions.
For example to see more information about a product or service.
Always use an accurate wording for the button label. The action which follows the mouse click must be comprehensive and reassuring for the user.
For example it's better to write "Add to basket" rather than "Add"
Use icon in button to complete and illustrated the button purpose.
Never use an icon that has no connection or is not explicit enough with the label.