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#

CSS VariableComputed Value










Props API#

ActionRow Props API
  • as React.ElementType

    Specifies the base element

    Default'div'
  • children React.ReactNode Required

    Specifies the contents of the row

  • className string

    Specifies class name to append to the base element

  • isStacked boolean

    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-account
22.10.0
5
frontend-app-admin-portal
21.13.1
50
frontend-app-authn
22.11.2
2
frontend-app-communications
22.7.0
2
frontend-app-course-authoring
22.8.1
73
ora_settings
22.8.1
1
proctoring
22.8.1
1
xpert_unit_summary
22.8.1
1
frontend-app-discussions
22.7.0
3
frontend-app-ecommerce
20.46.3
1
frontend-app-enterprise-public-catalog
21.13.1
2
frontend-app-gradebook
22.8.1
1
frontend-app-learner-dashboard
22.9.0
8
frontend-app-learner-portal-enterprise
21.13.1
19
frontend-app-learner-record
22.10.0
2
frontend-app-learning
22.10.0
4
frontend-app-library-authoring
21.11.3
14
frontend-app-ora-grading
21.11.3
4
frontend-app-payment
22.9.0
1
frontend-app-publisher
21.13.1
1
frontend-app-support-tools
21.13.1
25
frontend-component-header-edx
21.13.1
1
frontend-component-header
22.10.0
1
frontend-lib-special-exams
22.7.0
1
prospectus
20.46.2
2

ActionRowSpacer

Project NameParagon VersionInstance Count
frontend-app-admin-portal
21.13.1
11
frontend-app-course-authoring
22.8.1
31
frontend-app-learner-portal-enterprise
21.13.1
4
frontend-app-learner-record
22.10.0
1
frontend-app-learning
22.10.0
1
frontend-app-library-authoring
21.11.3
7
frontend-app-support-tools
21.13.1
5
frontend-component-header-edx
21.13.1
2
frontend-component-header
22.10.0
2