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

Show editable code example

Any Paragon component or export may be added to the code example.

<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

Show editable code example

Any Paragon component or export may be added to the code example.

<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

Show editable code example

Any Paragon component or export may be added to the code example.

<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;

Props API#

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.

Usage Insights#

ActionRow

Project Name	Paragon Version	Instance Count
frontend-app-account	20.46.3	5
frontend-app-admin-portal	20.46.3	31
frontend-app-authn	20.46.2	2
frontend-app-communications	20.46.2	2
frontend-app-course-authoring	20.46.2	30
frontend-app-discussions	20.44.0	3
frontend-app-ecommerce	20.46.2	1
frontend-app-enterprise-public-catalog	20.46.3	2
frontend-app-gradebook	20.45.0	1
frontend-app-learner-dashboard	20.46.2	9
frontend-app-learner-portal-enterprise	20.45.4	7
frontend-app-learner-record	20.46.3	2
frontend-app-learning	20.46.0	4
frontend-app-library-authoring	21.5.6	14
frontend-app-ora-grading	20.46.3	4
frontend-app-payment	20.46.2	1
frontend-app-publisher	20.46.2	1
frontend-app-support-tools	20.46.0	21
frontend-component-header-edx	21.5.6	1
frontend-component-header	21.5.6	1
frontend-lib-content-components	21.5.6	24
frontend-lib-special-exams	20.44.0	1
prospectus	20.46.2	2

ActionRowSpacer

Project Name	Paragon Version	Instance Count
frontend-app-admin-portal	20.46.3	7
frontend-app-course-authoring	20.46.2	8
frontend-app-learner-portal-enterprise	20.45.4	4
frontend-app-learner-record	20.46.3	1
frontend-app-learning	20.46.0	1
frontend-app-library-authoring	21.5.6	7
frontend-app-support-tools	20.46.0	5
frontend-component-header-edx	21.5.6	2
frontend-component-header	21.5.6	2
frontend-lib-content-components	21.5.6	22

Edit this page Leave feedback

Paragon Design System

Theme

ActionRow

Basic Usage

Usage with a Spacer

Stacked Usage

Theme Variables (SCSS)#

Props API#

Usage Insights#

ActionRow

ActionRowSpacer

All components (A-Z)

Theme

ActionRow

Basic Usage#

Usage with a Spacer#

Stacked Usage#

Theme Variables (SCSS)#

Props API#

Usage Insights#

ActionRow

ActionRowSpacer

All components (A-Z)

Basic Usage

Usage with a Spacer

Stacked Usage