Skip to content

Actions

The Actions component organizes calls-to-action in a consistent order across desktop and mobile environments.
Figma logo
  • 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

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
NameTypeDefaultDescription
children  RequiredReactNodeThe collection of Button or SubmitButton elements.
flow  columnrowrowDetermines the vertical alignment of the actions. If column is used, actions will be stacked.
justifyContent  centerstartstartDetermines the horizontal alignment of the actions. If center is used, actions will be centered on the horizontal (x) axis.