Action list

An action list is a group of actions, controls, or buttons with built-in spacing.

Examples

Action list single group


With kebab

Action list with icons


With group icons wrapper

Action list multiple groups

Action list with cancel button

In modals, forms, data lists

In wizards

Overview

Usage

Attribute
Applied to
Outcome
.pf-v6-c-action-list
<div>
Initiates the action list container.
.pf-v6-c-action-list__item
<div>
Initiates the action list item container.
.pf-v6-c-action-list__group
<div>
Initiates the action list group container.
.pf-m-icons
.pf-v6-c-action-list, .pf-v6-c-action-list__group
Modifies the action list and/or group to support icon buttons. If applied to .pf-v6-c-action-list, all nested groups will inherit this modification.

CSS variables

Expand or collapse columnSelectorVariableValue
:where(:root, .pf-v6-c-action-list)--pf-v6-c-action-list--RowGap
0.5rem
:where(:root, .pf-v6-c-action-list)--pf-v6-c-action-list--ColumnGap
3rem
:where(:root, .pf-v6-c-action-list)--pf-v6-c-action-list__group--ColumnGap
1rem
:where(:root, .pf-v6-c-action-list)--pf-v6-c-action-list--m-icons--ColumnGap
0.25rem
.pf-v6-c-action-list.pf-m-icons--pf-v6-c-action-list__group--ColumnGap
0.25rem