Action list
Action list is a vertical list of interactive actions or options. It's composed of items presented in a consistent, single-column format, with room for icons, descriptions, side information, and other rich visuals.
On this page
- @primer/react@37.5.0
- Beta
- Not reviewed for accessibility
On this page
Import
import {ActionList} from '@primer/react'
Examples
Props
ActionList
Name | Default | Description |
---|---|---|
childrenRequired | ActionList.Item[] | ActionList.LinkItem[] | ActionList.Group[] | |
variant | 'inset' | 'inset' | 'full'
|
selectionVariant | 'single' | 'multiple' Whether multiple items or a single item can be selected. | |
showDivider | false | boolean Display a divider above each item in this list when it does not follow a header or divider. |
role | AriaRole ARIA role describing the function of the list. | |
sx | SystemStyleObject |
ActionList.Item
Name | Default | Description |
---|---|---|
childrenRequired | React.ReactNode | ActionList.LeadingVisual | ActionList.Description | ActionList.TrailingVisual | |
variant | 'default' | 'default' | 'danger'
|
onSelect | (event: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLLIElement>) => void Callback that is called when the item is selected using either the mouse or keyboard. | |
selected | false | boolean Indicate whether the item is selected. Only applies to items that can be selected. |
active | false | boolean Indicate whether the item is active. There should never be more than one active item. |
disabled | false | boolean Items that are disabled can not be clicked, selected, or navigated to. |
inactiveText | string Text describing why the item is inactive. This may be used when an item's usual functionality is unavailable due to a system error such as a database outage. If there is a leading visual, the alert icon will replace the leading visual. If there is a trailing visual, it will replace the trailing visual. If there is no visual passed, it will be shown in the trailing visual slot to preserve left alignment of item content. Text will appear in a tooltip triggered by the alert icon in ActionList items, but text will appear below the description or title on ActionMenu items. | |
loading | boolean Whether the item is loading. | |
role | AriaRole ARIA role describing the function of the item. | |
sx | SystemStyleObject |
ActionList.Heading
Name | Default | Description |
---|---|---|
childrenRequired | React.ReactNode Use to give a heading to list | |
as | h3 | h1 | h2 | h3 | h4 | h5 | h6 The level of the heading |
sx | SystemStyleObject |
ActionList.LinkItem
Name | Default | Description |
---|---|---|
childrenRequired | React.ReactNode | ActionList.LeadingVisual | ActionList.Description | ActionList.TrailingVisual | |
active | false | boolean Indicate whether the item is active. There should never be more than one active item. |
ref | React.RefObject<HTMLAnchorElement> | |
as | "a" | React.ElementType |
sx | SystemStyleObject |
ActionList.LeadingVisual
Name | Default | Description |
---|---|---|
childrenRequired | React.ReactNode Icon (or similar) positioned before item text. | |
sx | SystemStyleObject |
ActionList.TrailingVisual
Name | Default | Description |
---|---|---|
childrenRequired | React.ReactNode Visual positioned after item text. | |
sx | SystemStyleObject |
ActionList.TrailingAction
Name | Default | Description |
---|---|---|
as | button | a | button HTML element to render as. |
labelRequired | string Acccessible name for the control. | |
iconRequired | string Octicon to pass into IconButton. When this is not set, TrailingAction renders as a | |
href | string href when the TrailingAction is rendered as a link. |
ActionList.Description
Name | Default | Description |
---|---|---|
childrenRequired | React.ReactNode | |
variant | 'inline' | 'inline' | 'block'
|
sx | SystemStyleObject | |
className | string | undefined CSS string | |
truncate | false | boolean Whether the inline description should truncate the text on overflow. |
ActionList.GroupHeading
Name | Default | Description |
---|---|---|
childrenRequired | React.ReactNode Use to give a heading to the groups | |
variant | 'subtle' | 'filled' | 'subtle'
|
as | h3 | h1 | h2 | h3 | h4 | h5 | h6 The level of the heading and it is only required (enforce by runtime warning) for lists. (i.e. not required for ActionMenu or listbox roles) |
sx | SystemStyleObject |
ActionList.Group
Name | Default | Description |
---|---|---|
childrenRequired | ActionList.Item[] | ActionList.LinkItem[] | |
titleDeprecated | string Please use | |
auxiliaryText | string Secondary text that provides additional information about the group. | |
variant | 'subtle' | 'filled' | 'subtle'
|
selectionVariant | 'single' | 'multiple' | false Set | |
role | AriaRole ARIA role describing the function of the list inside the group. | |
sx | SystemStyleObject |