A button enables the user to perform an action with a single click.

General guidelines

Actions are either immediate and visible on the page, or initiate a redirection to another page.


1. The primary button helps to highlight the main action of the page.

2. The secondary button should be used for actions that are less important than the main action.

3. The ghost button (also known as text button) is a specific secondary action. It should be used when the action is recurring and linked to patterns or a group of elements (e.g.: a table, a card list, a visual, etc.)

Add an icon to the label when the words are not clear enough, help with understanding and give more meaning to the action. (Label + icon)

Use icons when their meaning is clear enough for the user. (Icon)

4. Feedback buttons are optional and allow you to give feedback to the user about the action. For example, to indicate that the action is dangerous (e.g.: delete a file).


Best practices

Use only one primary button per page. Several types of button can be placed throughout one screen, use them wisely to indicate which action is the primary one.

Button order

When you have a primary button and a secondary button standing next to each other

  • According to the Gutenberg Principle, always place the primary button to the far bottom right and the secondary on its left (e.g.: in a modal, the primary button to confirm and the secondary button to cancel).
  • In case of a danger action, always place the primary action button on the left.
  • Always maintain a hierarchy between the various buttons on your page, guide users in their choices.

Button order on mobile devices.

Always place the primary button at the bottom of the screen. This placement follows the natural scan flow the user has. Also, placing the button at the bottom will make it more accessible/reachable, bringing efficiency to the interaction flow.

In specific cases you might want to consider a sticky primary button, this will make the call to action even more visible. (On browser based web app, remember to keep enough padding so there is no conflict with the browser bar).

  • Opt for labels that are as short as possible using a strong verb describing the resulting action.
  • Avoid writing more than three words in a button.
  • Respect the nomenclature of the label (lower case starting with a capital letter).
  • An icon can be placed to support the label, this usage is only recommended when the icon is fairly understandable and/or the usage is fairly explicit (e.g.: settings button)
Feedback button

Feedback buttons are to express a certain state:

  • Green is for success actions (example: validate).
  • Yellow is used to warn the user.
  • Red is for dangerous actions (example: delete)
Visual guidelines


Each type of button has 4 states: default, hover, focus and disable.

Always use the disable state when the button is not clickable.

White versions are available when the buttons are used on dark backgrounds or images and the necessary contrast for readability is lacking.



Several sizes are available, use them wisely depending on the action priority and your targeted device size.

Big sizes like XL & L will better suit mobile devices usage but can be used on desktop landing pages as well.

Responsive behaviours
Code & Design assets

Request code and design assets for creating user interfaces.

Component overview

Component overview

Can I contribute to the System?

Of course! Your contribution is more than welcomed and the System team will always be here to review your contributions or discuss.

Back to top