Buttons

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

This article is quite lengthy. To quickly find the information you're looking for, consider using the search.

Overview

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.

Design Guidelines

Overview of Roma Button

Buttons are a central component for enabling users to take actions in our products. Roma offers a wide variety of buttons to better suit use-cases and interactions.

Basic Buttons

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.

Async capabilities :

Loading state creates a specific interaction. It must be used only when the action involve a back-end operation that may take some time.

Counter Button

Deciding which button to use : Button / Async Button / Counter Button

Click on the image to open it

These three buttons may look alike, but they display distinct behaviors based on the outcomes of their activation.

Button is the default component. The action is direct, and does not need any loading. exemple : A button "Create" opening a form ; a button "Close" to exit a modale

Async Button must be used only when the action involve a back-end operation that may take some time. It conveys the information to users back-end operation are ongoing. exemple : A button "Save" to save an item creation form ; a button "Load more" to load list items

Counter Button must be used only when the action concerns pre selected items.

Buttons with overlay

Menu 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

Split Button

Deciding which button to use : Menu Button / Split Button

Those buttons 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.

Use Split Button when you have one strongest action to propose compared to another one. For the user, clicking the main part triggers the primary action; clicking the right side reveals additional options.

Use Menu Button for equally important but secondary actions, accessible after a click. For the user, clicking the button in itself doesn't trigger an action but it reveals additional options.

Navigation Buttons

Navigation Button

Navigation Button is a button with an icon expliciting users they are going to navigate to another page

Use Navigation Button for users to perform actions on another page. This component distinguishes itself from Hyperlink or Link Button by emphasizing its functionality, allowing users to perform actions rather than solely navigate. exemple : Go to a configuration page related to current page's focus

Link Button

Deciding which button to use : Navigation Button / Link Button

Each of these components facilitates user navigation but with distinct objectives.

Use Link Button for minor navigation options. While this component offer the possibility to users to navigate to another related page, they are not the primary focus of the page. Link button are meant to be used as secondary optional navigation. exemple : Go back to previous page

Use Navigation Button to perform actions on another page. This component distinguishes itself from Hyperlink or Link Button by emphasizing its functionality, allowing users to perform actions rather than solely navigate. exemple : Go to a configuration page related to current page's focus

Use Hyperlink to point to external resources, providing users with additional information or directing them to relevant documents or online resources, such as help center. exemple : Learn more about a feature

When should I add a trailing icon to Navigation Button and Hyperlink ?

Include an 'External link' icon when URL points to an external link (outside the current product).

Users will be informed clicking on component will take them outside the current product. This transparency prevents confusion about whether they will remain within the current environment or navigate to an external source. Also, it enhances accessibility for users, especially those relying on screen readers or other assistive technologies. The 'External link' icon provides additional information about the nature of the link, aiding users with disabilities in understanding its context.

Specific Use Cases Buttons

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.

Learn more about Icon Button on a Datatable

Switch Button

Upload Button

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

Destructive

Ghost

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.

Behaviors & Interactions

Disable State or Hide Button?

When an action is temporarily unavailable for reasons such as (but not only) :

• Technical update ongoing

• Roles allows a certain type of action, but a specific permission is required for an item

Then, use Disable state to display the button without allowing user interaction. Also, provide context through tooltips.

However, if the action is permanently inaccessible due to specific configurations such as (but not only) :

• Roles don't allows actions at all

Then, the button must be hidden. This way, the interface remains uncluttered and users are not presented with unnecessary options for them, reducing cognitive load and making the interface simpler to navigate. Hiding inaccessible buttons avoids confusion and frustration when users encounter non-functional elements.

Exemple : As a user, I usually use a Button to perform a recurring action to an item. I know perfectly where this button is.

But, it appear for once, i cannot perform this action as usual because the item status has changed.

Thus, Button is in disable state with a tooltip to explain why I cannot perform this action as I usually do.

But, if I didn't have the necessary permissions due to my role, I wouldn't have encountered this button previously.I would have never known about this action because I would have never had to perform it.

Content

Buttons are clear and predictable. They drive users to the next action.

Capitalize the first word and don’t use punctuation

Template: <Verb + noun> or just <verb>

Send message

Avoid unnecessary words and articles (’the’, ‘a’, ‘new’)

Preview profile

Import catalog

Reuse preexisting labels as much as possible, especially for common actions. It’ll help with adoption and scalability.

Back, Continue, Delete

Accessibility

All Button size are compliant to WGAC 2.5.8 Minimum Target Size

• In most cases, prefer using default-size buttons over small buttons. They are easier for users to notice and press.