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

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

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


	.pf-c-action-list	--pf-c-action-list--m-icon--spacer	0
	.pf-c-action-list	--pf-c-action-list--child--spacer-base	1rem
--pf-c-action-list--child--spacer-base --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-action-list	--pf-c-action-list--group--spacer-base	3rem
--pf-c-action-list--group--spacer-base --pf-global--spacer--2xl $pf-global--spacer--2xl pf-size-prem(48px) 3rem
	.pf-c-action-list	--pf-c-action-list--child--spacer	1rem
--pf-c-action-list--child--spacer --pf-c-action-list--child--spacer-base --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-action-list	--pf-c-action-list--group--spacer	3rem
--pf-c-action-list--group--spacer --pf-c-action-list--group--spacer-base --pf-global--spacer--2xl $pf-global--spacer--2xl pf-size-prem(48px) 3rem
	.pf-c-action-list.pf-m-icons	--pf-c-action-list--child--spacer	0
--pf-c-action-list--child--spacer --pf-c-action-list--m-icon--spacer 0

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

Copyright © 2022 Red Hat, Inc.

Privacy statement Terms of use All policies and guidelines