Product UI Components ActionList ActionList ActionList 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.
The simplest usage of an ActionList
Item one Item two Item three < ActionList > < ActionList.Item > Item one </ ActionList.Item > < ActionList.Item > Item two </ ActionList.Item > < ActionList.Item > Item three </ ActionList.Item > </ ActionList > ActionList items can contain render non-interactive content, typically a visual such as an icon, before or after the item content.
Item one Item two Item three < ActionList > < ActionList.Item > < ActionList.LeadingVisual > < Avatar src = " https://github.com/mona.png " /> </ ActionList.LeadingVisual > Item one < ActionList.TrailingVisual > < PencilIcon /> </ ActionList.TrailingVisual > </ ActionList.Item > < ActionList.Item > < ActionList.LeadingVisual > < Avatar src = " https://github.com/mona.png " /> </ ActionList.LeadingVisual > Item two < ActionList.TrailingVisual > < PencilIcon /> </ ActionList.TrailingVisual > </ ActionList.Item > < ActionList.Item > < ActionList.LeadingVisual > < Avatar src = " https://github.com/mona.png " /> </ ActionList.LeadingVisual > Item three < ActionList.TrailingVisual > < PencilIcon /> </ ActionList.TrailingVisual > </ ActionList.Item > </ ActionList > Similar to a trailing visual, except it triggers a secondary action when activated.
Trailing action guidelines
Item one Expand sidebar Item two (with link TrailingAction) Some action two Item three Some action three < ActionList > < ActionList.Item > Item one < ActionList.TrailingAction label = " Expand sidebar " icon = { ArrowLeftIcon } /> </ ActionList.Item > < ActionList.Item > Item two (with link TrailingAction) < ActionList.TrailingAction as = " a " href = " # " label = " Some action two " icon = { ArrowRightIcon } /> </ ActionList.Item > < ActionList.Item > Item three < ActionList.TrailingAction label = " Some action three " icon = { BookIcon } /> </ ActionList.Item > </ ActionList > Item dividers guidelines
Item one Item two Item three < ActionList showDividers > < ActionList.Item > Item one </ ActionList.Item > < ActionList.Item > Item two </ ActionList.Item > < ActionList.Item > Item three </ ActionList.Item > </ ActionList > Item one Lorem ipsum dolor
Item two Sit amet consectetur
Item three Adipiscing elit
< ActionList > < ActionList.Item > Item one < ActionList.Description > Lorem ipsum dolor </ ActionList.Description > </ ActionList.Item > < ActionList.Item > Item two < ActionList.Description > Sit amet consectetur </ ActionList.Description > </ ActionList.Item > < ActionList.Item > Item three < ActionList.Description > Adipiscing elit </ ActionList.Description > </ ActionList.Item > </ ActionList > Item one Lorem ipsum dolor
Item two Sit amet consectetur
Item three Adipiscing elit
< ActionList > < ActionList.Item > Item one < ActionList.Description variant = " block " > Lorem ipsum dolor </ ActionList.Description > </ ActionList.Item > < ActionList.Item > Item two < ActionList.Description variant = " block " > Sit amet consectetur </ ActionList.Description > </ ActionList.Item > < ActionList.Item > Item three < ActionList.Description variant = " block " > Adipiscing elit </ ActionList.Description > </ ActionList.Item > </ ActionList > A variant used to highlight an action that requires extra attention from the user.
Danger item guidelines
Item one Item two Item three Delete < ActionList > < ActionList.Item > Item one </ ActionList.Item > < ActionList.Item > Item two </ ActionList.Item > < ActionList.Item > Item three </ ActionList.Item > < ActionList.Item variant = " danger " > Delete </ ActionList.Item > </ ActionList > Inactive items that are non-functional due to some system state such as an outage.
Inactive item guidelines
Item one Unavailable due to an outage Item two Item three < ActionList > < ActionList.Item inactiveText = " Unavailable due to an outage " > Item one </ ActionList.Item > < ActionList.Item > Item two </ ActionList.Item > < ActionList.Item > Item three </ ActionList.Item > </ ActionList > Loading item guidelines
Item oneLoading Loading Item two Item three < ActionList > < ActionList.Item loading > Item one </ ActionList.Item > < ActionList.Item > Item two </ ActionList.Item > < ActionList.Item > Item three </ ActionList.Item > </ ActionList > Item one Item two Item three < ActionList > < ActionList.Item disabled > Item one </ ActionList.Item > < ActionList.Item > Item two </ ActionList.Item > < ActionList.Item > Item three </ ActionList.Item > </ ActionList > Selection state guidelines
import React from 'react' import { ActionList } from '@primer/react'
const items = [ { label : 'Item one' } , { label : 'Item two' } , { label : 'Item three' } ]
export default function SingleSelect ( ) { const [ selectedIndex , setSelectedIndex ] = React . useState ( 0 )
return ( < ActionList selectionVariant = " single " role = " menu " aria-label = " Item " > { items . map ( ( item , index ) => ( < ActionList.Item key = { index } role = " menuitemradio " selected = { index === selectedIndex } aria-checked = { index === selectedIndex } onSelect = { ( ) => setSelectedIndex ( index ) } > { item . label } </ ActionList.Item > ) ) } </ ActionList > ) }
Selection state guidelines
import React from 'react' import { ActionList } from '@primer/react'
const items = [ { label : 'Item one' } , { label : 'Item two' } , { label : 'Item three' } ]
export default function MultiSelect ( ) { const [ selectedIndices , setSelectedIndices ] = React . useState < number [ ] > ( [ 0 ] ) const handleSelect = ( index : number ) => { if ( selectedIndices . includes ( index ) ) { setSelectedIndices ( selectedIndices . filter ( i => i !== index ) ) } else { setSelectedIndices ( [ ... selectedIndices , index ] ) } }
return ( < ActionList selectionVariant = " multiple " role = " menu " aria-label = " Item " > { items . map ( ( item , index ) => ( < ActionList.Item key = { index } role = " menuitemcheckbox " selected = { selectedIndices . includes ( index ) } aria-checked = { selectedIndices . includes ( index ) } onSelect = { ( ) => handleSelect ( index ) } > { item . label } </ ActionList.Item > ) ) } </ ActionList > ) }
Items Item one Item two Item three
Listings Listing one Listing two Listing three < ActionList > < ActionList.Group > < ActionList.GroupHeading as = " h3 " > Items </ ActionList.GroupHeading > < ActionList.Item > Item one </ ActionList.Item > < ActionList.Item > Item two </ ActionList.Item > < ActionList.Item > Item three </ ActionList.Item > </ ActionList.Group > < ActionList.Group > < ActionList.GroupHeading as = " h3 " > Listings </ ActionList.GroupHeading > < ActionList.Item > Listing one </ ActionList.Item > < ActionList.Item > Listing two </ ActionList.Item > < ActionList.Item > Listing three </ ActionList.Item > </ ActionList.Group > </ ActionList > Item one Item two Item three Item four Item five Item six Delete < ActionList > < ActionList.Item > Item one </ ActionList.Item > < ActionList.Item > Item two </ ActionList.Item > < ActionList.Item > Item three </ ActionList.Item > < ActionList.Divider /> < ActionList.Item > Item four </ ActionList.Item > < ActionList.Item > Item five </ ActionList.Item > < ActionList.Item > Item six </ ActionList.Item > < ActionList.Divider /> < ActionList.Item variant = " danger " > Delete </ ActionList.Item > </ ActionList > The previous examples are a curated subset of the full capabilities of the ActionList component. For more examples, see the ActionList Storybook stories .
Loading data for action_list...