Action list

Examples

Action list single group

With kebab

Action list with icons

With list icons wrapper

With group icons wrapper

Action list multiple groups

Action list with cancel button

In modals, forms, data lists

In wizards

Vertical action list

Multiple groups

Icons, in two groups

Props

ActionList

*required
Name	Type	Default	Description
children	React.ReactNode		Children of the action list
className	string		Additional classes added to the action list
isIconList	boolean		Flag indicating the action list contains multiple icons and item padding should be removed
isVertical Beta	boolean	false	Whether the layout of children is vertical or horizontal.

ActionListGroup

*required
Name	Type	Default	Description
children	React.ReactNode		Children of the action list group
className	string		Additional classes added to the action list group
isIconGroup	boolean		Flag indicating the action list group contains multiple icons and item padding should be removed

ActionListItem

*required
Name	Type	Default	Description
children	React.ReactNode		Children of the action list item
className	string		Additional classes added to the action list item

CSS variables

Expand or collapse column	Selector	Variable	Value
	.pf-v6-c-action-list	--pf-v6-c-action-list--RowGap	0.5rem
--pf-v6-c-action-list--RowGap --pf-t--global--spacer--gap--group--vertical --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-action-list	--pf-v6-c-action-list--ColumnGap	3rem
--pf-v6-c-action-list--ColumnGap --pf-t--global--spacer--gap--group-to-group--horizontal--default --pf-t--global--spacer--2xl --pf-t--global--spacer--600 3rem
	.pf-v6-c-action-list	--pf-v6-c-action-list__group--ColumnGap	1rem
--pf-v6-c-action-list__group--ColumnGap --pf-t--global--spacer--gap--action-to-action--default --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-action-list	--pf-v6-c-action-list--m-vertical--RowGap	1.5rem
--pf-v6-c-action-list--m-vertical--RowGap --pf-t--global--spacer--gap--group-to-group--vertical--default --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-action-list	--pf-v6-c-action-list--m-icons--ColumnGap	0.25rem
--pf-v6-c-action-list--m-icons--ColumnGap --pf-t--global--spacer--gap--action-to-action--plain --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-action-list	--pf-v6-c-action-list--m-vertical--m-icons--RowGap	0.25rem
--pf-v6-c-action-list--m-vertical--m-icons--RowGap --pf-t--global--spacer--gap--action-to-action--plain --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-action-list.pf-m-icons	--pf-v6-c-action-list__group--ColumnGap	0.25rem
--pf-v6-c-action-list__group--ColumnGap --pf-v6-c-action-list--m-icons--ColumnGap --pf-t--global--spacer--gap--action-to-action--plain --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-action-list.pf-m-icons	--pf-v6-c-action-list--m-vertical--RowGap	0.25rem
--pf-v6-c-action-list--m-vertical--RowGap --pf-v6-c-action-list--m-vertical--m-icons--RowGap --pf-t--global--spacer--gap--action-to-action--plain --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem

Edit this page on GitHub