Theme

npm_versionnpm Paragon package page

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.

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.

Stacked Usage

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

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.46.35
frontend-app-admin-portal20.46.336
frontend-app-authn20.46.22
frontend-app-communications20.46.22
frontend-app-course-authoring21.5.638
frontend-app-discussions20.46.33
frontend-app-ecommerce20.46.21
frontend-app-enterprise-public-catalog20.46.32
frontend-app-gradebook20.45.01
frontend-app-learner-dashboard20.46.29
frontend-app-learner-portal-enterprise20.45.47
frontend-app-learner-record20.46.32
frontend-app-learning20.46.04
frontend-app-library-authoring21.5.614
frontend-app-ora-grading20.46.34
frontend-app-payment20.46.21
frontend-app-publisher20.46.31
frontend-app-support-tools20.46.020
frontend-component-header-edx21.5.61
frontend-component-header21.5.61
frontend-lib-content-components21.5.624
frontend-lib-special-exams20.44.01
prospectus20.46.22

ActionRowSpacer

Project NameParagon VersionInstance Count
frontend-app-admin-portal20.46.37
frontend-app-course-authoring21.5.610
frontend-app-learner-portal-enterprise20.45.44
frontend-app-learner-record20.46.31
frontend-app-learning20.46.01
frontend-app-library-authoring21.5.67
frontend-app-support-tools20.46.05
frontend-component-header-edx21.5.62
frontend-component-header21.5.62
frontend-lib-content-components21.5.622