Buttons are used to trigger actions. Their appearance is depending on the type of action required from the user, or the context.
We created different color themes to suit what you need in your design.
You can use
danger theme in
bordered declination. These declinations can help you to make what's important stand out.
|Primary||For main actions on the page or engaging actions|
|Primary-02||For main specific actions dedicated to Campus|
|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|
There is 3 sizes for the buttons to create hierarchy and for a better adaptability.
|Medium (default)||3mu (48px)|
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||2.5mu (48px) [displayed in 40px]||2mu (32px)|
A button width can either fit its content or its container.
For example to see more information about a product or service.
For example it's better to write "Add to basket" rather than "Add"