Action Button

Use for most actions in the interface.

Cover - Action button



FYQ2 target

♼ Care

Figma component




Action Buttons are the most used actions in the interface. They can go alone or group with other actions. That’s why they always have leading icons that reinforce the meaning of the text label and facilitate scanning the different options more easily.

When there’s no next best action to suggest or people are in the middle of a flow inside a given context, we will use the Secondary emphasis level as the default.

Action 1
Action 2

If we turn it into a conversation, an Action Button would be the equivalent of saying, “You can do this”. In that context, we can add more than one option to that phrase: “You can do this, this, and this”, unlike the CTA Button.

Related components

How to use

Displaying more options

Displaying more options

If we want to display a list of more options hidden inside a menu, we will use Tertiary emphasis to differentiate that Action from the rest.

Icon Only Action Buttons

Hiding text labels

When the horizontal space is limited, you can optionally hide the Action Button’s label enabling the Icon Only property, relying only on the icon to convey its meaning. These actions display a tooltip that shows the label on mouse hover or keyboard focus. Use sparingly.

Quality checklist

This component passes the following requirements described in our Component lifecycle:



α · Design tokens

It uses Ariane design tokens.

α · Official assets

It uses the official Ariane assets (e.g., icons and illustrations) in one of the official sizes.

α · Accessible use of color

Its color contrast ratio is at least 4.5:1 for text and interactive areas.

α · Target areas

Its interactive target areas are large enough for users to accurately select them, following the Fitts law.

α · Naming agreement

Its name is agreed upon and shared between design and development.

α · Responsive L1

Is responsive to different viewport sizes.

α · User-triggered states

If the component is interactive, all its possible user-triggered interactive states are defined.

β · Responsive L2

The responsive behavior has been reviewed and validated by the team.

β · State properties

All the possible state attributes are defined.

β · Docs L1

It has essential documentation with at least primary usage.

β · Use cases

All the uses are audited and refined.

RC · Definition agreement

Its naming and properties are audited and aligned in design and code.

RC · Accessible L1

Its accessibility is manually audited, and any significant issues are fixed.

RC · Docs L2

The documentation covers the most common use cases and is expected to be iterated during the Release Candidate phase.

RC · Storybook

Includes a Storybook playground of the component.

Stable · Stable API

The component and its API remain stable, with no breaking changes for at least one month.

Stable · Adaptive

Supports adaptive design via preference queries.

Stable · Docs L3

Detailed documentation exists for design, content, accessibility, and implementation, including do’s and dont’s.

Stable · Tooling

Tooling (such as linters, codemods, etc.) exists to help with migrations and prevent further use of alternatives.