Action Buttons

A set of recommendations on how to use action-based color buttons.

Types

An action-based color button is a primary button that uses alert colors to help people identify certain actions more easily. There are 4 types of action-based color buttons:

Success

Indicates a positive action, such as the addition of an item.

button primary default size default success state

Info

Usually informs the user about a neutral event.

button primary default size default info state

Warning

Indicates an action that can have some side effects and users should be cautious. These actions can be undone by the user if the action was made mistakenly.

button primary default size default warning state

Error

Indicates a dangerous action, generally a destructive action. These actions cannot be undone.

button primary default size default error state

States

Default State

set of four action-based color buttons in default state

Hover State

set of four action-based color buttons in hover state

Active State

set of four action-based color buttons in active state

Disabled State

set of four action-based color buttons in disabled state

Usage

Action-based color buttons are used to draw attention and give extra meaning to important actions. They are used when we need to emphasize the meaning of a call to action button but they should be used with moderation.

Modals

We recommend using the primary color for modals, instead of action-based color buttons.

primary button in a modal

However, action-based color buttons can be used in modals for status messages to accentuate the action and its meaning. But for the sake of consistency and coherency, we recommend always using the same kind of buttons. That is to say, choose between primary color or action-based color buttons in modals for status messages and stick to that.

modal for status message with action-based color button

As with any other primary call-to-action button, do not place two action-based color buttons together as this can force the user to spend time making sense of the color-label association.

modal for status message with action-based color button and a secondary button Don't

Don't


modal for status message with action-based color button and a secondary button Do

Do



In a context where an action-based color button is next to a secondary button, you can choose to style the latter, using a secondary button as shown in the previous image or a secondary action-based color button as shown in the following image.

Component with action-based color button and a secondary action button

Alerts

Action-based color buttons can also be used in alerts when there is a need to highlight the action inside the alert. But you should take into account that it needs to be the only primary action in a specific context, to help the user identify the main action. Alert with action-based color button

Menu