Action list

HTML

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

Overview

Usage

Attribute	Applied to	Outcome
`.pf-c-action-list`	`<div>`	Initiates the action list container.
`.pf-c-action-list__item`	`<div>`	Initiates the action list item container.
`.pf-c-action-list__group`	`<div>`	Initiates the action list group container.
`.pf-m-icons`	`.pf-c-action-list`, `.pf-c-action-list__group`	Modifies the action list to support button icons.

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