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
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 | booleanDisplay a divider above each item in this list when it does not follow a header or divider. |
role | AriaRoleARIA 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>) => voidCallback that is called when the item is selected using either the mouse or keyboard. | |
selected | false | booleanIndicate whether the item is selected. Only applies to items that can be selected. |
active | false | booleanIndicate whether the item is active. There should never be more than one active item. |
disabled | false | booleanItems that are disabled can not be clicked, selected, or navigated to. |
inactiveText | stringText 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. | |
role | AriaRoleARIA role describing the function of the item. | |
sx | SystemStyleObject |
ActionList.LinkItem
| Name | Default | Description |
|---|---|---|
childrenRequired | React.ReactNode | ActionList.LeadingVisual | ActionList.Description | ActionList.TrailingVisual | |
active | false | booleanIndicate 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.ReactNodeIcon (or similar) positioned before item text. | |
sx | SystemStyleObject |
ActionList.TrailingVisual
| Name | Default | Description |
|---|---|---|
childrenRequired | React.ReactNodeVisual positioned after item text. | |
sx | SystemStyleObject |
ActionList.Description
| Name | Default | Description |
|---|---|---|
childrenRequired | React.ReactNode | |
variant | 'inline' | 'inline' | 'block'
|
sx | SystemStyleObject |
ActionList.GroupHeading
| Name | Default | Description |
|---|---|---|
childrenRequired | React.ReactNodeUse to give a heading to the groups | |
variant | 'subtle' | 'filled' | 'subtle'
|
as | h3 | h1 | h2 | h3 | h4 | h5 | h6The 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[] | |
title | stringTitle of the group. | |
auxiliaryText | stringSecondary text that provides additional information about the group. | |
variant | 'subtle' | 'filled' | 'subtle'
|
selectionVariant | 'single' | 'multiple' | falseSet | |
role | AriaRoleARIA role describing the function of the list inside the group. | |
sx | SystemStyleObject |