Buttons

A central component to guide users through their experience in the platform. They trigger actions and let users know what their options are.

Types

Button

Buttons are highly visual clickable elements that are used to trigger actions. They allow users to interact with our product in various ways. Button is the main and most used one

Counter Button

Counter Button is to be used on very specific conditions. Because of its Counter props added after Label, this button is meant to trigger the action only on selected items. The user's selection automatically updates the counter.

Users have to select at least 1 item before triggering action. Until then, Counter Button should remain disabled or hidden to emphasize its action perimeter.

Because of its usage

Icon Button

Icon Button are buttons with no label. It contains only a visual indication of the action it performs.

Using Icon Button is a great way to stack multiple actions into a small space or to repeat the same action several times in the same view.

Because only an icon is not easily understandable by everyone, it must be used only for common actions, such as Download, Delete, View, Copy , etc.

For common actions, we must always use the same icon throughout our platform to facilitate our users' experience.

Icon buttons can use Primary, Secondary or Ghost variant depending on the context.

Test how users understand icons. If needed, switch to a basic button with a label for more usability.
Reuse the same icons for the same actions to create a pattern for users.

Add a label to an Icon Button

Menu Button allows presenting a large collection of actions to users without overloading the page content. The button triggersAction Menu as an overlay. The final action is then triggered by the user's selection in the overlay.

Because of our tool's various features, some pages may propose many actions. Not all of them need to be offered to users at once.

While the most important actions must be highlighted by using Primary/Secondary Buttons and shown directly in the page content, other less important actions can be nested into a Menu Button.

Menu Button has its guidelines and props.

Use Menu Button not to overload the page with too many small actions.
Follow Action Menu guidelines to display additional actions.

Do not hide important actions behind Menu Button because of low discoverability.

Filter Button

Filter Button should:

Always be used in a toolbar (e.g. for Datatable)
Have the same microcopy as the column you wish to filter
Triggers a selection list

Filter Button can also have a tooltip that appears when hovering the button.

Split Button

Split Button is a hybrid between a Basic Button and a Menu Button : it groups related commands into a dropdown but also offers one-click access to a default choice that does not require opening the menu.

It has two components: a Button with a label and an Icon Button with an arrow. Clicking the Button triggers the default action - the most used one. Clicking on the Icon Button opens up a list of other minor possible actions related to the default one.

Be careful when using Split Button. While it may seem like an obvious design pattern for some, options within the menu can have low discoverability for some users. In our research, we have found users don’t always recognize this pattern, so they may not notice the secondary menu button and, consequently, the options located within the menu. Therefore the default option should be strong enough to serve most use cases.

We mostly use it in the Save Bar to offer an additional "Save as Draft" option to forms.

Split Button VS Menu Button

Those components are a great way to reduce visual clutter. However, they introduce more complexity into the design: the additional step results in a decrease in action discoverability.

Prefer Menu Button when all actions have similar importance.

Prefer Split Button when you have one strongest action to propose compared to another one.

Use this component when similar actions can be regrouped
Always offer the strongest action as the default one, with a label

Upload Button

Upload Button is a standard-looking button, but its behavior is restricted to file upload.

It automatically handles file formatting and number acceptance.

Link Button

Link Button allows creating a visual hierarchy for those minor actions. They look like links but are not. Link Button is meant to be used sparingly.

Some actions may not need to be as visually attractive as others. Those are peripheral actions. They bring added value to certain users in specific use cases, but yet those actions are still less important than others.

Link Button comes in 2 sizes : Small or Default. It has 3 available states: Primary, Secondary and Tertiary. A customizable icon can be added before or after Label but it is not mandatory. It has to bring added value to understand the action. For example, adding a down arrow to the "See more" label help users understand some content is hidden but may be shown just below.

Hyperlink VS Link Button

Hyperlinks redirect users to a new page, meaning clicking triggers a URL change, while button action happens on the same page without any URL change.

For accessibility, the distinction becomes even more important, especially for those using Assistive Technology (A.T.) such as screen readers and dictation software.

Use Link Button sparingly for minor actions.
Use the right size to comply with the page's homogeneity.

Do not use Link Button to redirect users to another URL.
Do not add an icon if it does not bring any added value to the understanding of the action itself.

Variations

Variant

Primary

Use a Primary Button to call the user's attention to the main action of a section or container.

This variant is dedicated to strong and important actions.

Primary Button calls for important actions, it should be used mindfully. Our best guideline is to offer either a single Primary Button within the page title or one per container.
It must never be doubled up to sit side by side.
Not all pages require a Primary Button. Sometimes all actions are secondary to the content and of equal importance.

Secondary

Use a Secondary Button for additional and less important actions within a page.

You can use several Secondary buttons on the same container, providing they serve the actual purpose of the feature.

Destructive

Use Destructive Button for actions that will delete or disable something important.

Destructive actions must be validated using a non-skippable confirmation modal.

Ghost

Use for minor actions on a page. In main cases, Ghost Button goes with a Primary button for additional actions, such as “Cancel" or “Clear”.

Ghost Button is used for minor actions that don't serve the actual purpose of the feature.

If a button is placed within a page, it has to be included in a spacing wrapper.

Size

In most cases, use Default Size. The button height is set to 40px, but its width fits its content. Thus, be mindful when writing button microcopy. Learn more on how to write labels for buttons

The small size is reserved for tight spaces, such as Datatable Toolbar, Panel Header.

The tiny size is dedicated to the tiniest spaces.

What about the Stretch variant?

Button has specific props:Full width : True/False. When activated, the button will fit the width of its container. It provides a Stretch effect.

This prop is to be used sparingly, mostly for tiny spaces such as mobile or small containers.

State

Depending on users' interactions or action availability, buttons may be in various states:

Default state is how buttons appear by default with no user interactions
Hover state is how buttons appear when the user moves their mouse over the component. While hovering, a tooltip may appear to provide more information about the action.
Loading state is how buttons interact when users click on the component, but the platform needs time to process the action. This interaction is mandatory when the button describes an action (creation, edition) and should not be used when the button creates a redirection.
Disable state is how buttons appear when the action is not clickable. Users will not be able to perform any action. A tooltip may appear to provide more information about the deactivation reasons.

💡 Disable State or Hide Button?

When an action is not temporarily available, Disable state helps show the button but prevents users from trying to click it. It helps communicate to users where the action is, even though they cannot perform anything for the moment. You can add a tooltip to give more context about why a button is disabled.

However, if users are never able to perform the action (due to a specific configuration of their environment, for example), we simply hide the button.

Guidelines

How to use

Button enable actions that are important to a user. They are not decorative elements. Instead, they direct users to complete important goals within an experience.

1 Button = 1 action = 1 label
In most cases, Buttons are automatically displayed in a nested component such as Page Title, Panel Header, Modal , etc.

Accessibility

In most cases, prefer using default-size buttons over small buttons. They are easier for users to notice and press.
Disabled state has lower contrast and can confuse some users. Use it carefully.