Buttons

Types

Buttons are used to initialize action, either to go on another page (i.e. call to action on a banner), to act on an item (i.e. save, add or login) or to navigate inside an app (i.e. next or previous).
Based on the action triggered, different types of buttons are available.

1. Primary button
   Use this one as the main call to action on interfaces.
2. Secondary button
   For secondary actions. Great at keeping the eye focused on a page's primary imagery. With properly chosen background and well-outlined contrasting border secondary button attracts attention without giving a user overwhelming impression.
3. Tertiary button
   Use tertiary buttons in isolation, for less prominent actions, or paired with a Primary or Secondary button, or multiple CTAs around the same subject.

4. Order/Activate button
   The order/activate call-to-action button allows you to go to the webshop/caddy. This green button is also used at the end of the order flow to validate the order.

5. Previous/Next button
   Use this one for navigation purpose (e.g. webshop flow or multi-pages forms). Always displayed on the bottom of the section/page/component, aligned at the left. Those button have the same look than a primary and seconday button. Arrow icons are mandatory for previous/next button.

States

1. Default state
   State visible before click.
2. Hover/Focused state
   State visible when the cursor hovers the button and triggered by keyboard navigation or click. Container & label are displayed in another colour depending of the type of button. Cursor becomes a pointer.

3. Waiting state
   State visible after click. Waiting dots and a waiting message are displayed to inform the user why he is waiting. The waiting dots are displayed at the left of the label by default, except for next button and the tertiary button.
4. Disabled state
   State visible if the button is not clickable. All elements (container & label) are displayed but they are greyed out in order to signify the change of state.

Anatomy

1. Container
   A container is displayed around the text label with a solid color.
2. Button label
   Button label is the most important element on a button, as it indicates the action that will be triggered when clicked. Try to be as concise as possible to avoid having big/long buttons.
   
   
   Explicit label

   The label alone has to be sufficiently explicit for the users to understand the link purpose and target. Make sure to write a clear and concise label about the action the users are about to perform.

3. Contextual icon (optional)
   Only available for primary and secondary button. There is no icon by default. When words are not enough, you can use icons to better communicate what the button does. The icon used must be directly related to the action that the users are taking, and displayed at the left of the label, except for next button. Arrow icons are only used for previous/next button.
4. Action icon
   Only available for tertiary button. The arrow icon is considered as action icon and mandatorily displayed at the right of the label and this is the only icon available for the tertiary button.

Primary & secondary buttons used together

When used next to each other, different button types should be used in order to make the primary action stand out from the rest.

Rounded corner

Combining two buttons happens a lot. In order to keep consistency throughout digital interface, use rounded corner only on the last displayed button.

Do
Secondary button has 4 straigth corners next to a primary button.

Don't
Secondary button with a rounded corner next to a primary button.

Button position

When using multiple buttons next to each other, button should appear in order of prominence from left to right, and top to bottom on mobile (most important one on the right, or top on mobile).

Even though, research has shown that there is no performance or usability issue when display first the primary or secondary action, consistency throughout products and interfaces is crucial.

Therefore, on desktop, you should use buttons in the prescribed order (from left to right): secondary button(s) (without any rounded corners), then, the primary button (with the rounded corner) as last button.

Consequently, it is important to keep consistency in the button positioning. Depending on the situation, you'll position buttons as follow:

Do

Don't

On mobile, the button order changes: the primary button first (without rounded corner because this is not the last button) and the secondary will have a rounded corner as last button.

Do

Don't

A single prominent button by section

Make sure each section contain a single prominent button which emphasizes its role as main action in comparison with other less important buttons.

An interface can show more than one button in a section at a time, so a primary button can be accompanied by secondary and tertiary buttons with less important actions. Please refer to the previous section to know more about Primary & secondary buttons used together

Do
Use a secondary button next to a primary.

Don't
Use multiple primary buttons next to each other.

Order button

The order button is considered as the primary action and therefore as a primary button. With an order button, we can only use a secondary or tertiary button in the same section.

Do

Don't

Button alignment

Button alignment depends on where they are displayed.

Left aligned

Within section on the commercial website

In forms & multi-steps configurators (webshop,...)

Cancel, previous and next used together

More examples available here

Right aligned

In dashboard, when using cards

In overlayers

Full width

For the primary, secondary and order buttons, the container width is set to the size of the text label with paddings on the left and right on desktop and set it relative to the width of the column on mobile.

On mobile

When displayed on mobile, buttons take the full width of their container by default. If multiple buttons, they stack one on top of each other. It's possible to manualy change it to align the button on the left, with the width based on paddings.

There is an exception for the tertiary button, which is aligned at the right and not take the full width. It's possible to manualy change its alignement too.

In comparative and rates tables.

When displayed on comparative tables, buttons take the full width of their container.

Open in new window