ActionRow
Leave feedbackA 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#
- as
elementTypeDefault'div'Specifies the base element
- className
stringSpecifies class name to append to the base element
- children
nodeDefaultnullSpecifies the contents of the row
- isStacked
boolDefaultfalseSpecifies whether row should be displayed horizontally
Usage Insights#
ActionRow
| Project Name | Paragon Version | Instance Count | |
|---|---|---|---|
| frontend-app-account | 20.44.0 | 5 | |
| frontend-app-admin-portal | 20.39.2 | 27 | |
| frontend-app-authn | 20.45.5 | 2 | |
| frontend-app-communications | 20.45.0 | 2 | |
| frontend-app-course-authoring | 20.35.1 | 7 | |
| frontend-app-discussions | 20.44.0 | 3 | |
| frontend-app-ecommerce | 20.35.0 | 1 | |
| frontend-app-enterprise-public-catalog | 20.29.0 | 2 | |
| frontend-app-gradebook | 20.45.0 | 1 | |
| frontend-app-learner-dashboard | 20.32.0 | 8 | |
| frontend-app-learner-portal-enterprise | 20.45.1 | 7 | |
| frontend-app-learner-record | 20.45.0 | 2 | |
| frontend-app-learning | 20.28.4 | 4 | |
| frontend-app-library-authoring | 20.45.5 | 13 | |
| frontend-app-ora-grading | 20.45.1 | 4 | |
| frontend-app-payment | 20.45.0 | 1 | |
| frontend-app-publisher | 20.28.5 | 1 | |
| frontend-app-support-tools | 20.45.0 | 18 | |
| frontend-component-header | 20.45.5 | 1 | |
| frontend-lib-content-components | 20.45.0 | 26 | |
| frontend-lib-special-exams | 20.29.0 | 1 | |
| prospectus | 20.45.2 | 2 |
ActionRowSpacer
| Project Name | Paragon Version | Instance Count | |
|---|---|---|---|
| frontend-app-admin-portal | 20.39.2 | 5 | |
| frontend-app-course-authoring | 20.35.1 | 2 | |
| frontend-app-learner-portal-enterprise | 20.45.1 | 4 | |
| frontend-app-learner-record | 20.45.0 | 1 | |
| frontend-app-learning | 20.28.4 | 1 | |
| frontend-app-library-authoring | 20.45.5 | 7 | |
| frontend-app-support-tools | 20.45.0 | 3 | |
| frontend-component-header | 20.45.5 | 1 | |
| frontend-lib-content-components | 20.45.0 | 25 |