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.

Import

import {ActionList} from '@primer/react'

Examples

View in Storybook

Props

ActionList

Name	Default	Description
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	`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. `listbox` and `menu` are a common values.
sx		`SystemStyleObject`

ActionList.Item

Name	Default	Description
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	`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.
role		`AriaRole` ARIA role describing the function of the item. `option` is a common value.
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.Description

Name	Default	Description
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

Name	Default	Description
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`

Primer Design System

Site navigation