Actions

DOM nodes should be ordered sequentially, i.e. primary, secondary, tertiary
- The component will rearrange them to the desired order
Child actions should use the Button, Link variant="primary|secondary|tertiary", SubmitButton component
- Do not use Button variant="link"
Always include a primary action
- Limit pages to one primary CTA per page
- Secondary or tertiary buttons should be used for secondary tasks
Actions should not contain text elements
- Place the text blocks outside of the Actions component
Disabled states are available, but are strongly discouraged
- Learn aboutalternative approaches to disabling buttons

The Actions component will place actions in a consistent order across viewport sizes:

On larger viewports (>600px/sm breakpoint), the actions will be aligned horizontally in the following order:
secondary, primary, tertiary (on a new line).
On smaller viewports (<600px/sm breakpoint), the actions will be stacked vertically in the following order:
primary, secondary, tertiary.

The Actions component rearranges the individual actions based on environment because the order that makes sense on desktop doesn’t make sense in mobile environments.

Consistent placement of calls-to-action allows our users to more efficiently navigate their way through the app, freeing up the cognitive burden of learning the UI and allowing them to focus on the task at hand.

These examples:

use the Button component, but SubmitButton is a more likely candidate for Forms
are centered in a Box with a width of 632, which is our current suggestion for form containers
use justifyContent="center", which is our recommendation for most flows

Primary, secondary, and tertiary actions.

Primary and secondary actions should generally sit on the same axis.

Tertiary actions should generally sit below other actions. Use flow="column" to achieve this.

Solitary actions should always be styled as primary actions.

We suggest center alignment using justifyContent="center" for most cases, but alignment can be customized for certain cases (e.g. in Dialog).

React props
Name	Type	Default	Description
children Required	`ReactNode`		The collection of `Button` or `SubmitButton` elements.
flow	`columnrow`	row	Determines the vertical alignment of the actions. If `column` is used, actions will be stacked.
justifyContent	`centerstart`	start	Determines the horizontal alignment of the actions. If `center` is used, actions will be centered on the horizontal (x) axis.