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.

  • @primer/react@37.5.0
  • Beta
  • Not reviewed for accessibility

Import

import {ActionList} from '@primer/react'

Examples

View in Storybook

Props

ActionList

NameDefaultDescription
childrenRequired
ActionList.Item[] | ActionList.LinkItem[] | ActionList.Group[]
variant
'inset''inset' | 'full'

inset children are offset (vertically and horizontally) from list edges. full children are flush (vertically and horizontally) with list edges

selectionVariant
'single' | 'multiple'

Whether multiple items or a single item can be selected.

showDivider
falseboolean

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. listbox and menu are a common values.

sx
SystemStyleObject

ActionList.Item

NameDefaultDescription
childrenRequired
React.ReactNode | ActionList.LeadingVisual | ActionList.Description | ActionList.TrailingVisual
variant
'default''default' | 'danger'

danger indicates that the item is destructive.

onSelect
(event: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLLIElement>) => void

Callback that is called when the item is selected using either the mouse or keyboard. event.preventDefault() will prevent a menu from closing when within an <ActionMenu />. This is not called for disabled or inactive items.

selected
falseboolean

Indicate whether the item is selected. Only applies to items that can be selected.

active
falseboolean

Indicate whether the item is active. There should never be more than one active item.

disabled
falseboolean

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. option is a common value.

sx
SystemStyleObject

ActionList.Heading

NameDefaultDescription
childrenRequired
React.ReactNode

Use to give a heading to list

as
h3h1 | h2 | h3 | h4 | h5 | h6

The level of the heading

sx
SystemStyleObject

ActionList.LinkItem

NameDefaultDescription
childrenRequired
React.ReactNode | ActionList.LeadingVisual | ActionList.Description | ActionList.TrailingVisual
active
falseboolean

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

NameDefaultDescription
childrenRequired
React.ReactNode

Icon (or similar) positioned before item text.

sx
SystemStyleObject

ActionList.TrailingVisual

NameDefaultDescription
childrenRequired
React.ReactNode

Visual positioned after item text.

sx
SystemStyleObject

ActionList.TrailingAction

NameDefaultDescription
as
buttona | 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 Button instead of an IconButton.

href
string

href when the TrailingAction is rendered as a link.

ActionList.Description

NameDefaultDescription
childrenRequired
React.ReactNode
variant
'inline''inline' | 'block'

inline descriptions are positioned beside primary text. block descriptions are positioned below primary text.

sx
SystemStyleObject
className
string | undefined

CSS string

truncate
falseboolean

Whether the inline description should truncate the text on overflow.

ActionList.GroupHeading

NameDefaultDescription
childrenRequired
React.ReactNode

Use to give a heading to the groups

variant
'subtle''filled' | 'subtle'

filled style has a background color and top and bottom borders. Subtle style has no background or borders.

as
h3h1 | 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

NameDefaultDescription
childrenRequired
ActionList.Item[] | ActionList.LinkItem[]
titleDeprecated
string

Please use ActionList.GroupHeading instead.

auxiliaryText
string

Secondary text that provides additional information about the group.

variant
'subtle''filled' | 'subtle'

inline descriptions are positioned beside primary text. block descriptions are positioned below primary text.

selectionVariant
'single' | 'multiple' | false

Set selectionVariant at the group level.

role
AriaRole

ARIA role describing the function of the list inside the group. listbox and menu are a common values.

sx
SystemStyleObject
Navigated to Action list