Live demo — this example is server-driven; run the showcase locally for the interactive version.

Action list

A horizontal group of related actions with standardized spacing. Two or more groups sit side-by-side; each group lays out its items with a small gap. Used in wizard footers, modal/form action bars, and inline row controls.

Examples

Single group

One group with a primary and a secondary button — the canonical Next / Back pairing.

With kebab

Same Next / Back pair with a kebab menu toggle for overflow actions. The kebab button is a static placeholder; wire it to a real Menu or Dropdown in production.

Icons on list

Set iconList=true to apply pf-m-icons on the root — every item gets tight icon spacing.

Icons on group

Set iconGroup: true on a specific group to apply tight icon spacing only to that group while sibling groups keep default spacing.

Multiple groups

Two groups laid out side-by-side. PF separates groups with a wider column gap than items within a group, signaling a step boundary or a primary / destructive split.

Cancel — form

The standard modal / form footer — primary Save plus a link-styled Cancel.

Cancel — wizard

Wizard footer — Next / Back navigate in one group, with the cancel sitting alone in its own group to keep it visually distinct from the primary nav.

Vertical

Divergence from PF — vertical=true applies pf-m-vertical to stack actions vertically. Useful in narrow side panels or as icon menus inside sidebars.

Documentation

Action list props

Parameters accepted by {#include components/actions/action-list ... /}. Model mode: pass actionList=<ActionList> built in Java instead — the Java tab on each example shows the builder.

* required
Name	Type	Default	Description
`{#items}`	Slot	—	The list contents. Compose PatternFly's `pf-v6-c-action-list__group` / `pf-v6-c-action-list__item` wrappers around Button components. Any markup works, so kebab toggles and dropdowns drop straight in.
`id`	String	—	DOM id on the action-list container; omit unless referenced.
`iconList`	boolean	`false`	Applies `pf-m-icons` on the root — removes item padding for tighter spacing across the whole list. PF's `isIconList`.
`vertical`	boolean	`false`	PHA divergence — applies `pf-m-vertical` to stack groups and items vertically.

Divergence from PF React. We skip className (React-specific). Our iconList is PF's isIconList — same semantic, shorter name. PF React doesn't ship a vertical layout; we add vertical for narrow side-panel use cases.

Usage

One group vs. many. Use a single group for tightly related actions (Save + Cancel). Use multiple groups when actions belong to distinct mental categories — e.g. wizard navigation (Next / Back) separated from cancellation. PF widens the gutter between groups relative to items inside a group, so the visual split is automatic.

Icon-only groups. Use iconList when every item is an icon. Use iconGroup when only some groups are icon-heavy — for example, inline row actions next to a save bar.

Cancel placement. In forms and modals, cancel is the last item in the same group as the save button. In wizards, cancel sits in its own group at the trailing edge so it's visually separated from the next / back navigation.

Accessibility. Icon-only items require ariaLabel. The component doesn't add a role="toolbar" — wrap in PF's pf-v6-c-toolbar if your action list is the page's primary toolbar.

The raw escape hatch. Reserved for cases the structured shape doesn't cover (kebab toggles, dropdowns, custom popovers). Because it's emitted with .raw, the HTML is not escaped — sanitize at the source if it could contain user input.

Edit action-list.html on GitHub