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#
CSS Variable | Computed Value |
---|---|
| |
| |
| |
| |
| |
Props API#
- as
React.ElementType
Default'div'Specifies the base element
- children
React.ReactNode
RequiredSpecifies the contents of the row
- className
string
Specifies class name to append to the base element
- isStacked
boolean
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.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 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 |