Components

Buttons

sketch:Readyscss:Readyfigma:Ready
vue
:Ready
freemarker
:Ready

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 themeUsage
PrimaryFor main actions on the page or engaging actions
Primary-02For main specific actions dedicated to Campus
NeutralFor secondary or minor actions on the page and for navigation buttons like the pagination
DangerFor 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.

SizeValue
Small2mu (32px)
Medium (default)3mu (48px)
Large3.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 sizeIcon onlyIcon + text
Small1.5mu (24px)1.5mu (24px)
Medium2mu (32px)1.5mu (24px)
Large2mu (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.

Never use in proximity two solid buttons with the same color theme