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@35.28.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 />

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.

role
AriaRole

ARIA role describing the function of the item. option is a common value.

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.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

ActionList.Group

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

Title of the group.

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