Go to content Go to menu

Buttons

Buttons are the goto to trigger an action on a page. They can trigger creative or destructive actions, allow you to execute in-page action or let you go to a new page.

A button is a visual aspect to catch the eye of the user and invite him to do something in a specific context. The DNA of our buttons is quite classical. The basic shape is coming with a lot of variations to cover several use cases.

Table of Contents

Button DNA

The buttons all come with a minimal surface area on which it is possible to interact to trigger actions. The smallest size variation is 32 pixels wide, and even if the visual size is that small, the minimum "touch" area is 40 pixels wide minimum.
Here some technical information for basic buttons.

A button with blue gradient and measurements here and there, described below.

Technical Basics

Information you need in order to build a basic button:

  • DIN Pro Medium 16px Uppercase is used in white
  • Background is a Blue Tertiary from #4EABFF to #0F8DFF on normal state.
  • Padding left and right are 16px, top and bottom are 12px
  • Border Radius are 4 pixels
  • Total height is approximately 40px. Approx. because you never block the height of an element with a text inside of it (accessibility recommandation).

Buttons Variations

Buttons are used for creating assertiveness and engagement for an action. Depending on the goals of the page, view or block of content, the choice of the type of button is important. Follow these guides to help you chose and keep consistency.

State Variations

While using a button, the user will make it pass by several states described as following:

This page is still under construction. But the following content can still help you.





Color variants







Form variants





State variants











Size variants