ActionRow

A layout utility for the common use case of aligning buttons, links or text in a row in a control bar or nav.

ActionRow assumes that its last child is the primary action and lays out actions so that the last item is in a primary location. If horizontal, the primary action sits on the right. If stacked, the primary action sits at the top of the stack (this is done via flex-direction: column-reverse;).

Basic Usage

<ActionRow>
  <Button variant="tertiary">
    Cancel
  </Button>
  <Button variant="primary">
    Submit
  </Button>
</ActionRow>

<ActionRow>
  <Button variant="tertiary">
    Cancel
  </Button>
  <Button variant="primary">
    Submit
  </Button>
</ActionRow>

Usage with a Spacer

ActionRow can also be used with a helper component ActionRow.Spacer to insert empty space between children

<ActionRow>
  <Form.Checkbox className="flex-column flex-sm-row">Don't ask me again.</Form.Checkbox>
  <ActionRow.Spacer />
  <Button variant="tertiary">
    Cancel
  </Button>
  <Button variant="primary">
    Submit
  </Button>
</ActionRow>

<ActionRow>
  <Form.Checkbox className="flex-column flex-sm-row">Don't ask me again.</Form.Checkbox>
  <ActionRow.Spacer />
  <Button variant="tertiary">
    Cancel
  </Button>
  <Button variant="primary">
    Submit
  </Button>
</ActionRow>

Stacked Usage

<ActionRow isStacked>
  <p className="x-small">
    Bespoke leggings yuccie, portland umami readymade craft beer vaporware sriracha.
  </p>
  <Button variant="tertiary">
    Go back
  </Button>
  <Button variant="primary">
    Continue
  </Button>
</ActionRow>

<ActionRow isStacked>
  <p className="x-small">
    Bespoke leggings yuccie, portland umami readymade craft beer vaporware sriracha.
  </p>
  <Button variant="tertiary">
    Go back
  </Button>
  <Button variant="primary">
    Continue
  </Button>
</ActionRow>

Theme Variables (SCSS)#

$action-row-gap-x:                   .5rem !default;
$action-row-gap-y:                   .5rem !default;

ActionRow Props API

as elementType
Specifies the base element
Default'div'
className string
Specifies class name to append to the base element
children node
Specifies the contents of the row
Defaultnull
isStacked bool
Specifies whether row should be displayed horizontally
Defaultfalse

ActionRowSpacer Props API

This component does not receive any props.

Paragon Design System

ActionRow

Basic Usage

Usage with a Spacer

Stacked Usage

Theme Variables (SCSS)#

Guides

Foundations

PlaygroundBeta

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)

ActionRow

Basic Usage#

Usage with a Spacer#

Stacked Usage#

Theme Variables (SCSS)#

Guides

Foundations

PlaygroundBeta

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)

Basic Usage

Usage with a Spacer

Stacked Usage