Button

Component checklist

Resources

 

Types

There are various types of buttons. To choose the right one, consider the context of the situation.

Primary

The primary button is used for the most important call-to-action on a page.

On any given page, use only one primary button. In inevitable cases where you must use two or more primary buttons, place them in the application header, in a modal dialog, or in a panel. Not every screen requires a primary button.

Secondary (Light)

The secondary or light button is used for general actions. Due to its neutral visual weight, it's the preferred choice for most cases.

Close or Cancel button - Use a light version as a Close or Cancel button in modal dialogs and panels with a grey background.

Secondary (Ghost)

The secondary ghost button is an alternative to the light button. Choose this button in cases where the light button would dominate the interface.

Close or Cancel button - Use a ghost version as a Close or Cancel button in modal dialogs and panels with a white background.

Tertiary (Invisible)

Use this button to avoid clutter around borders, for example, in bars or search bars.

Danger

The danger button grabs users' attention and asks them for confirmation before completing a destructive action, such as removing or deleting.

The danger button is mainly used in confirmation modals.

Request

The request button allows users to request a demo, contact their account manager, or buy new features.

Link

Use the link button for alternative actions. The link button should be located near the main button (the primary or secondary one).

You can use the link button as a standalone button in table rows if there are more actions, such as show details and remove.

Inverse

The inverse button should be used only on high-contrast backgrounds such as explanatory/guide tooltips or snackbars.

In the case of a high-contrast background, use this inverse variant as a primary button and use the link variant as a secondary button.

 

Variations

There are several variations of buttons. As with the button type, consider the context of the situation when selection the appropriate variation.

1. Text only - Default variation of the button.
2. Left Icon - Place an icon on the left side of the button to support a call to action visually.
3. Right Icon - Place an icon on the right side of the button to indicate movement or shift, such as an arrow to the right of the Next button.
4. Icon-only - Use an icon-only button (without text) for actions that are clear from the icon, especially when there's not enough space for a text button. In most cases, you must complement an icon-only button with a brief tooltip explaining the button's action.

 

Badge

Use a badge on a button to give users visual information that a selection has been applied.

In most cases, buttons' badges are combined with a label selection or user assignment when there is no space in the design to display labels or users.

A badge can be applied to each button variation. Its position is always in the same place (top right).

As with content in a badge, Soul allows you to use numbers or text up to four characters.

In the case of numbers, you should always shorten bigger values.

 

Sizes

There are several sizes of buttons. As with button types and variations, consider the context of the situation when selecting the appropriate size.

1. Large - Use the large button for essential actions in a spacious interface.
2. Medium - Use the medium button for most cases. This is the default size of our buttons.
3. Small - Use the small button only in cases where there is a lack of space in the interface or when the button’s action is secondary to the page content.

 

Emphasis

You don’t necessarily need to use the buttons in the order that their labels imply. For example, you don’t always need to use the secondary button as the second button in your layout. The most important thing is to establish a visual hierarchy between the buttons in your UI. Keep these best practices in mind:

A single, high-emphasis button

As a general rule, a layout should contain a single high-emphasis button that makes it clear that other buttons have less importance in the hierarchy. This high-emphasis button commands the most attention.

Multiple button emphasis

A high-emphasis button can be accompanied by medium- and low-emphasis buttons that perform less important actions. Remember that you should only group calls to action that are related to one another.

Although secondary buttons have less visual prominence because they are less saturated than their primary counterparts, they are still tonally heavy. If your layout requires multiple actions—as is the case with some toolbars, data lists, and dashboards—low-emphasis buttons (tertiary or ghost) may be a better choice.