PatternFly

Action list

An action list is a group of actions, controls, or buttons with set spacing.

Examples

Action list single group


With kebab

Action list with icons

Action list multiple groups

Action list with cancel button

In modals, forms, data lists

In wizards

Props

ActionList

*required
NameTypeDefaultDescription
childrenReact.ReactNodeChildren of the action list
classNamestring''Additional classes added to the action list
isIconListbooleanFlag indicating the action list contains multiple icons and item padding should be removed

ActionListGroup

*required
NameTypeDefaultDescription
childrenReact.ReactNodeChildren of the action list group
classNamestring''Additional classes added to the action list group

ActionListItem

*required
NameTypeDefaultDescription
childrenReact.ReactNodeChildren of the action list item
classNamestring''Additional classes added to the action list item

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v5-c-action-list--pf-v5-c-action-list--m-icon--spacer
0
.pf-v5-c-action-list--pf-v5-c-action-list--child--spacer-base
1rem
.pf-v5-c-action-list--pf-v5-c-action-list--group--spacer-base
3rem
.pf-v5-c-action-list--pf-v5-c-action-list--child--spacer
1rem
.pf-v5-c-action-list--pf-v5-c-action-list--group--spacer
3rem
.pf-v5-c-action-list.pf-m-icons--pf-v5-c-action-list--child--spacer
0

View source on GitHub