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.
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
elementType
Default'div'Specifies the base element
- className
string
Specifies class name to append to the base element
- children
node
DefaultnullSpecifies the contents of the row
- isStacked
bool
DefaultfalseSpecifies whether row should be displayed horizontally
Usage Insights#
ActionRow
Project Name | Paragon Version | Instance Count | |
---|---|---|---|
frontend-app-account | 22.10.0 | 5 | |
frontend-app-admin-portal | 21.13.1 | 50 | |
frontend-app-authn | 22.10.0 | 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 Name | Paragon Version | Instance 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 |