Paragon Design System

Technical Documentation

Theme

PlaygroundBeta

npm_versionnpm Paragon package page

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

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

<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

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>

Stacked Usage

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>

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 NameParagon VersionInstance Count
frontend-app-account20.36.05
frontend-app-admin-portal20.26.329
frontend-app-authn20.36.22
frontend-app-communications20.30.11
frontend-app-course-authoring20.32.03
frontend-app-discussions20.15.03
frontend-app-ecommerce20.35.01
frontend-app-enterprise-public-catalog20.29.02
frontend-app-gradebook19.25.41
frontend-app-learner-dashboard20.32.08
frontend-app-learner-portal-enterprise20.36.07
frontend-app-learner-record20.32.01
frontend-app-learning20.28.44
frontend-app-library-authoring20.30.113
frontend-app-ora-grading20.30.04
frontend-app-payment20.30.11
frontend-app-publisher20.28.51
frontend-app-support-tools20.26.018
frontend-component-header20.36.01
frontend-lib-content-components20.34.023
frontend-lib-special-exams20.22.41
prospectus20.32.32

ActionRowSpacer

Project NameParagon VersionInstance Count
frontend-app-admin-portal20.26.36
frontend-app-learner-portal-enterprise20.36.04
frontend-app-learning20.28.41
frontend-app-library-authoring20.30.17
frontend-app-support-tools20.26.03
frontend-component-header20.36.01
frontend-lib-content-components20.34.021
Leave feedback

Contents

All components (A-Z)