Action list

Info alert:Beta feature

This Beta component is currently under review, so please join in and give us your feedback on the PatternFly forum.

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

Name	Type	Required	Default	Description
children	React.ReactNode	No		Children of the action list
isIconList	boolean	No		Flag indicating the action list contains multiple icons and item padding should be removed

ActionListGroup

Name	Type	Required	Default	Description
children	React.ReactNode	No		Children of the action list group

ActionListItem

Name	Type	Required	Default	Description
children	React.ReactNode	No		Children of 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 © 2019 Red Hat, Inc.

Privacy statement Terms of use All policies and guidelines