Toolbar

A toolbar is a responsive container that displays controls that allow users to manage and manipulate a data set.

CSS variables

Expand or collapse column	Selector	Variable	Value
	.pf-v6-c-toolbar	--pf-v6-c-toolbar--RowGap	1rem
--pf-v6-c-toolbar--RowGap --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-toolbar	--pf-v6-c-toolbar--PaddingBlockStart	0
	.pf-v6-c-toolbar	--pf-v6-c-toolbar--PaddingBlockEnd	1rem
--pf-v6-c-toolbar--PaddingBlockEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-toolbar	--pf-v6-c-toolbar--PaddingInlineStart	0
	.pf-v6-c-toolbar	--pf-v6-c-toolbar--PaddingInlineEnd	0
	.pf-v6-c-toolbar	--pf-v6-c-toolbar--LineHeight	1.5
--pf-v6-c-toolbar--LineHeight --pf-t--global--font--line-height--body --pf-t--global--font--line-height--200 1.5
	.pf-v6-c-toolbar	--pf-v6-c-toolbar--FontSize	0.875rem
--pf-v6-c-toolbar--FontSize --pf-t--global--font--size--body--default --pf-t--global--font--size--sm --pf-t--global--font--size--200 0.875rem
	.pf-v6-c-toolbar	--pf-v6-c-toolbar--BackgroundColor	transparent
	.pf-v6-c-toolbar	--pf-v6-c-toolbar--m-primary--BackgroundColor	(In light theme) #ffffff
--pf-v6-c-toolbar--m-primary--BackgroundColor --pf-t--global--background--color--primary--default --pf-t--global--background--color--100 --pf-t--color--white #ffffff
	.pf-v6-c-toolbar	--pf-v6-c-toolbar--m-secondary--BackgroundColor	(In light theme) #f2f2f2
--pf-v6-c-toolbar--m-secondary--BackgroundColor --pf-t--global--background--color--secondary--default --pf-t--global--background--color--200 --pf-t--color--gray--10 #f2f2f2
	.pf-v6-c-toolbar	--pf-v6-c-toolbar--m-no-background--BackgroundColor	transparent
	.pf-v6-c-toolbar	--pf-v6-c-toolbar__item--Width	auto
	.pf-v6-c-toolbar	--pf-v6-c-toolbar__item--MinWidth	auto
	.pf-v6-c-toolbar	--pf-v6-c-toolbar__item--RowGap	0.5rem
--pf-v6-c-toolbar__item--RowGap --pf-t--global--spacer--gap--group--vertical --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-toolbar	--pf-v6-c-toolbar__item--ColumnGap	1rem
--pf-v6-c-toolbar__item--ColumnGap --pf-t--global--spacer--gap--group--horizontal --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-toolbar	--pf-v6-c-toolbar__item--m-overflow-container--MinWidth	0
	.pf-v6-c-toolbar	--pf-v6-c-toolbar__group--RowGap	0.5rem
--pf-v6-c-toolbar__group--RowGap --pf-t--global--spacer--gap--group--vertical --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-toolbar	--pf-v6-c-toolbar__group--ColumnGap	1rem
--pf-v6-c-toolbar__group--ColumnGap --pf-t--global--spacer--gap--group--horizontal --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-toolbar	--pf-v6-c-toolbar__group--m-overflow-container--MinWidth	0
	.pf-v6-c-toolbar	--pf-v6-c-toolbar__content--RowGap	1rem
--pf-v6-c-toolbar__content--RowGap --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-toolbar	--pf-v6-c-toolbar__content--PaddingInlineStart	0
	.pf-v6-c-toolbar	--pf-v6-c-toolbar__content--PaddingInlineEnd	0
	.pf-v6-c-toolbar	--pf-v6-c-toolbar__content-section--RowGap	0.5rem
--pf-v6-c-toolbar__content-section--RowGap --pf-t--global--spacer--gap--group--vertical --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-toolbar	--pf-v6-c-toolbar__content-section--ColumnGap	1rem
--pf-v6-c-toolbar__content-section--ColumnGap --pf-t--global--spacer--gap--group--horizontal --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-toolbar	--pf-v6-c-toolbar__expandable-content--ZIndex	200
--pf-v6-c-toolbar__expandable-content--ZIndex --pf-t--global--z-index--sm --pf-t--global--z-index--200 200
	.pf-v6-c-toolbar	--pf-v6-c-toolbar__expandable-content--RowGap	0.5rem
--pf-v6-c-toolbar__expandable-content--RowGap --pf-t--global--spacer--gap--group--vertical --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-toolbar	--pf-v6-c-toolbar__expandable-content--PaddingBlockStart	1rem
--pf-v6-c-toolbar__expandable-content--PaddingBlockStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-toolbar	--pf-v6-c-toolbar__expandable-content--PaddingBlockEnd	1rem
--pf-v6-c-toolbar__expandable-content--PaddingBlockEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-toolbar	--pf-v6-c-toolbar__expandable-content--PaddingInlineStart	1rem
--pf-v6-c-toolbar__expandable-content--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-toolbar	--pf-v6-c-toolbar__expandable-content--PaddingInlineEnd	1rem
--pf-v6-c-toolbar__expandable-content--PaddingInlineEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-toolbar	--pf-v6-c-toolbar__expandable-content--BoxShadow	0px 10px 10px -8px rgb(41, 41, 41, 0.1500)
--pf-v6-c-toolbar__expandable-content--BoxShadow --pf-t--global--box-shadow--md--bottom --pf-t--global--box-shadow--X--md--bottom --pf-t--global--box-shadow--Y--md--bottom --pf-t--global--box-shadow--blur--md --pf-t--global--box-shadow--spread--md--directional --pf-t--global--box-shadow--color--md--directional --pf-t--global--box-shadow--X--400 --pf-t--global--box-shadow--Y--700 --pf-t--global--box-shadow--blur--200 --pf-t--global--box-shadow--spread--300 --pf-t--global--box-shadow--color--100 0px 10px 10px -8px rgb(41, 41, 41, 0.1500)
	.pf-v6-c-toolbar	--pf-v6-c-toolbar__expandable-content--BackgroundColor	(In light theme) #ffffff
--pf-v6-c-toolbar__expandable-content--BackgroundColor --pf-t--global--background--color--floating--default --pf-t--global--background--color--100 --pf-t--color--white #ffffff
	.pf-v6-c-toolbar	--pf-v6-c-toolbar__expandable-content--BorderBlockEndWidth	0px
--pf-v6-c-toolbar__expandable-content--BorderBlockEndWidth --pf-t--global--border--width--high-contrast--regular 0px
	.pf-v6-c-toolbar	--pf-v6-c-toolbar__expandable-content--BorderBlockEndColor	(In light theme) rgb(255, 255, 255, 0.0000)
--pf-v6-c-toolbar__expandable-content--BorderBlockEndColor --pf-t--global--border--color--high-contrast rgb(255, 255, 255, 0.0000)
	.pf-v6-c-toolbar	--pf-v6-c-toolbar--m-sticky--ZIndex	100
--pf-v6-c-toolbar--m-sticky--ZIndex --pf-t--global--z-index--xs --pf-t--global--z-index--100 100
	.pf-v6-c-toolbar	--pf-v6-c-toolbar--m-sticky--PaddingBlockStart	1rem
--pf-v6-c-toolbar--m-sticky--PaddingBlockStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-toolbar	--pf-v6-c-toolbar--m-sticky--PaddingBlockEnd	1rem
--pf-v6-c-toolbar--m-sticky--PaddingBlockEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-toolbar	--pf-v6-c-toolbar--m-sticky--PaddingInlineStart	0
	.pf-v6-c-toolbar	--pf-v6-c-toolbar--m-sticky--PaddingInlineEnd	0
	.pf-v6-c-toolbar	--pf-v6-c-toolbar--m-sticky--BoxShadow	0px 4px 6px -4px rgb(41, 41, 41, 0.2000)
--pf-v6-c-toolbar--m-sticky--BoxShadow --pf-t--global--box-shadow--sm--bottom --pf-t--global--box-shadow--X--sm--bottom --pf-t--global--box-shadow--Y--sm--bottom --pf-t--global--box-shadow--blur--sm --pf-t--global--box-shadow--spread--sm--directional --pf-t--global--box-shadow--color--sm--directional --pf-t--global--box-shadow--X--400 --pf-t--global--box-shadow--Y--600 --pf-t--global--box-shadow--blur--100 --pf-t--global--box-shadow--spread--200 --pf-t--global--box-shadow--color--200 0px 4px 6px -4px rgb(41, 41, 41, 0.2000)
	.pf-v6-c-toolbar	--pf-v6-c-toolbar--m-sticky--BackgroundColor	(In light theme) #ffffff
--pf-v6-c-toolbar--m-sticky--BackgroundColor --pf-t--global--background--color--sticky--default --pf-t--global--background--color--100 --pf-t--color--white #ffffff
	.pf-v6-c-toolbar	--pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth	0px
--pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth --pf-t--global--border--width--high-contrast--regular 0px
	.pf-v6-c-toolbar	--pf-v6-c-toolbar--m-sticky--BorderBlockEndColor	(In light theme) rgb(255, 255, 255, 0.0000)
--pf-v6-c-toolbar--m-sticky--BorderBlockEndColor --pf-t--global--border--color--high-contrast rgb(255, 255, 255, 0.0000)
	.pf-v6-c-toolbar	--pf-v6-c-toolbar--m-sticky--BorderRadius	0
	.pf-v6-c-toolbar	--pf-v6-c-toolbar--m-sticky--BorderRadius--glass	16px
--pf-v6-c-toolbar--m-sticky--BorderRadius--glass --pf-t--global--border--radius--medium --pf-t--global--border--radius--300 16px
	.pf-v6-c-toolbar	--pf-v6-c-toolbar--m-sticky--BoxShadow--glass	0px 1px 6px 0px rgb(41, 41, 41, 0.1500)
--pf-v6-c-toolbar--m-sticky--BoxShadow--glass --pf-t--global--box-shadow--sm --pf-t--global--box-shadow--X--sm--default --pf-t--global--box-shadow--Y--sm--default --pf-t--global--box-shadow--blur--sm --pf-t--global--box-shadow--spread--sm--default --pf-t--global--box-shadow--color--sm--default --pf-t--global--box-shadow--X--400 --pf-t--global--box-shadow--Y--500 --pf-t--global--box-shadow--blur--100 --pf-t--global--box-shadow--spread--100 --pf-t--global--box-shadow--color--100 0px 1px 6px 0px rgb(41, 41, 41, 0.1500)
	.pf-v6-c-toolbar	--pf-v6-c-toolbar--m-sticky--PaddingInlineStart--glass	0.5rem
--pf-v6-c-toolbar--m-sticky--PaddingInlineStart--glass --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-toolbar	--pf-v6-c-toolbar--m-sticky--PaddingInlineEnd--glass	0.5rem
--pf-v6-c-toolbar--m-sticky--PaddingInlineEnd--glass --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-toolbar	--pf-v6-c-toolbar--m-sticky--TransitionTimingFunction--BackgroundColor	cubic-bezier(.4, 0, .2, 1)
--pf-v6-c-toolbar--m-sticky--TransitionTimingFunction--BackgroundColor --pf-t--global--motion--timing-function--default --pf-t--global--timing-function--200 cubic-bezier(.4, 0, .2, 1)
	.pf-v6-c-toolbar	--pf-v6-c-toolbar--m-sticky--TransitionDuration--BackgroundColor	200ms
--pf-v6-c-toolbar--m-sticky--TransitionDuration--BackgroundColor --pf-t--global--motion--duration--fade--default --pf-t--global--motion--duration--md --pf-t--global--duration--200 200ms
	.pf-v6-c-toolbar	--pf-v6-c-toolbar--m-vertical--Width	fit-content
	.pf-v6-c-toolbar	--pf-v6-c-toolbar__expand-all-icon--Rotate	0
	.pf-v6-c-toolbar	--pf-v6-c-toolbar__expand-all-icon--TransitionDuration	100ms
--pf-v6-c-toolbar__expand-all-icon--TransitionDuration --pf-t--global--motion--duration--icon--default --pf-t--global--motion--duration--sm --pf-t--global--duration--100 100ms
	.pf-v6-c-toolbar	--pf-v6-c-toolbar__expand-all-icon--TransitionTimingFunction	cubic-bezier(.4, 0, .2, 1)
--pf-v6-c-toolbar__expand-all-icon--TransitionTimingFunction --pf-t--global--motion--timing-function--default --pf-t--global--timing-function--200 cubic-bezier(.4, 0, .2, 1)
	.pf-v6-c-toolbar	--pf-v6-c-toolbar__item--m-expand-all--m-expanded__expand-all-icon--Rotate	-180deg
	.pf-v6-c-toolbar	--pf-v6-c-toolbar__group--m-filter-group--ColumnGap	0.25rem
--pf-v6-c-toolbar__group--m-filter-group--ColumnGap --pf-t--global--spacer--gap--control-to-control--default --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-toolbar	--pf-v6-c-toolbar__item--m-label--FontWeight	600
--pf-v6-c-toolbar__item--m-label--FontWeight --pf-t--global--font--weight--body--bold --pf-t--global--font--weight--200 600
	.pf-v6-c-toolbar	--pf-v6-c-toolbar__group--m-label-group--ColumnGap	0.5rem
--pf-v6-c-toolbar__group--m-label-group--ColumnGap --pf-t--global--spacer--gap--text-to-element--default --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-toolbar	--pf-v6-c-toolbar__group--m-action-group--ColumnGap	1rem
--pf-v6-c-toolbar__group--m-action-group--ColumnGap --pf-t--global--spacer--gap--action-to-action--default --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-toolbar	--pf-v6-c-toolbar__group--m-action-group-plain--ColumnGap	0.25rem
--pf-v6-c-toolbar__group--m-action-group-plain--ColumnGap --pf-t--global--spacer--gap--action-to-action--plain --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-toolbar	--pf-v6-c-toolbar__group--m-action-group-inline--ColumnGap	1rem
--pf-v6-c-toolbar__group--m-action-group-inline--ColumnGap --pf-t--global--spacer--gap--action-to-action--default --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	:where(.pf-v6-theme-glass) .pf-v6-c-toolbar	--pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth	0
	:where(.pf-v6-theme-glass) .pf-v6-c-toolbar	--pf-v6-c-toolbar--m-sticky--BoxShadow	0px 1px 6px 0px rgb(41, 41, 41, 0.1500)
--pf-v6-c-toolbar--m-sticky--BoxShadow --pf-v6-c-toolbar--m-sticky--BoxShadow--glass --pf-t--global--box-shadow--sm --pf-t--global--box-shadow--X--sm--default --pf-t--global--box-shadow--Y--sm--default --pf-t--global--box-shadow--blur--sm --pf-t--global--box-shadow--spread--sm--default --pf-t--global--box-shadow--color--sm--default --pf-t--global--box-shadow--X--400 --pf-t--global--box-shadow--Y--500 --pf-t--global--box-shadow--blur--100 --pf-t--global--box-shadow--spread--100 --pf-t--global--box-shadow--color--100 0px 1px 6px 0px rgb(41, 41, 41, 0.1500)
	:where(.pf-v6-theme-glass) .pf-v6-c-toolbar	--pf-v6-c-toolbar--m-sticky--BorderRadius	16px
--pf-v6-c-toolbar--m-sticky--BorderRadius --pf-v6-c-toolbar--m-sticky--BorderRadius--glass --pf-t--global--border--radius--medium --pf-t--global--border--radius--300 16px
	:where(.pf-v6-theme-glass) .pf-v6-c-toolbar	--pf-v6-c-toolbar--m-sticky--PaddingInlineStart	0.5rem
--pf-v6-c-toolbar--m-sticky--PaddingInlineStart --pf-v6-c-toolbar--m-sticky--PaddingInlineStart--glass --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	:where(.pf-v6-theme-glass) .pf-v6-c-toolbar	--pf-v6-c-toolbar--m-sticky--PaddingInlineEnd	0.5rem
--pf-v6-c-toolbar--m-sticky--PaddingInlineEnd --pf-v6-c-toolbar--m-sticky--PaddingInlineEnd--glass --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-toolbar__content-section	--pf-v6-hidden-visible--visible--Display	flex
	.pf-v6-c-toolbar__content-section	--pf-v6-hidden-visible--hidden--Display	none
	.pf-v6-c-toolbar__content-section	--pf-v6-hidden-visible--Display	flex
--pf-v6-hidden-visible--Display --pf-v6-hidden-visible--visible--Display --pf-v6-c-data-list__item-action--Display flex
	.pf-v6-c-toolbar__content-section.pf-m-hidden	--pf-v6-hidden-visible--Display	none
--pf-v6-hidden-visible--Display --pf-v6-hidden-visible--hidden--Display none
	.pf-v6-c-toolbar__content	--pf-v6-hidden-visible--visible--Display	grid
	.pf-v6-c-toolbar__content	--pf-v6-hidden-visible--hidden--Display	none
	.pf-v6-c-toolbar__content	--pf-v6-hidden-visible--Display	flex
--pf-v6-hidden-visible--Display --pf-v6-hidden-visible--visible--Display --pf-v6-c-data-list__item-action--Display flex
	.pf-v6-c-toolbar__content.pf-m-hidden	--pf-v6-hidden-visible--Display	none
--pf-v6-hidden-visible--Display --pf-v6-hidden-visible--hidden--Display none
	.pf-v6-c-toolbar.pf-m-sticky	--pf-v6-c-toolbar--BackgroundColor	(In light theme) #ffffff
--pf-v6-c-toolbar--BackgroundColor --pf-v6-c-toolbar--m-sticky--BackgroundColor --pf-t--global--background--color--sticky--default --pf-t--global--background--color--100 --pf-t--color--white #ffffff
	.pf-v6-c-toolbar.pf-m-sticky-base	--pf-v6-c-toolbar--BackgroundColor	(In light theme) #ffffff
--pf-v6-c-toolbar--BackgroundColor --pf-v6-c-toolbar--m-sticky--BackgroundColor --pf-t--global--background--color--sticky--default --pf-t--global--background--color--100 --pf-t--color--white #ffffff
	.pf-v6-c-toolbar.pf-m-full-height	--pf-v6-c-toolbar--PaddingBlockStart	0
	.pf-v6-c-toolbar.pf-m-full-height	--pf-v6-c-toolbar--PaddingBlockEnd	0
	.pf-v6-c-toolbar.pf-m-no-padding	--pf-v6-c-toolbar--PaddingBlockEnd	0
	.pf-v6-c-toolbar.pf-m-no-padding	--pf-v6-c-toolbar--m-sticky--PaddingBlockStart	0
	.pf-v6-c-toolbar.pf-m-no-padding	--pf-v6-c-toolbar--m-sticky--PaddingBlockEnd	0
	.pf-v6-c-toolbar.pf-m-primary	--pf-v6-c-toolbar--BackgroundColor	(In light theme) #ffffff
--pf-v6-c-toolbar--BackgroundColor --pf-v6-c-toolbar--m-primary--BackgroundColor --pf-t--global--background--color--primary--default --pf-t--global--background--color--100 --pf-t--color--white #ffffff
	.pf-v6-c-toolbar.pf-m-secondary	--pf-v6-c-toolbar--BackgroundColor	(In light theme) #f2f2f2
--pf-v6-c-toolbar--BackgroundColor --pf-v6-c-toolbar--m-secondary--BackgroundColor --pf-t--global--background--color--secondary--default --pf-t--global--background--color--200 --pf-t--color--gray--10 #f2f2f2
	.pf-v6-c-toolbar.pf-m-no-background	--pf-v6-c-toolbar--BackgroundColor	transparent
--pf-v6-c-toolbar--BackgroundColor --pf-v6-c-toolbar--m-no-background--BackgroundColor transparent
	.pf-v6-c-toolbar.pf-m-vertical	--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart	auto
	.pf-v6-c-toolbar.pf-m-vertical	--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart	0
	.pf-v6-c-toolbar.pf-m-vertical	--pf-v6-c-toolbar--PaddingBlockEnd	0
	.pf-v6-c-toolbar.pf-m-vertical	--pf-v6-c-toolbar--Width	auto
--pf-v6-c-toolbar--Width --pf-v6-c-toolbar--m-vertical--Width auto
	.pf-v6-c-toolbar__item	--pf-v6-c-toolbar__item--Width--base	auto
--pf-v6-c-toolbar__item--Width--base --pf-v6-c-toolbar__item--Width auto
	.pf-v6-c-toolbar__item	--pf-v6-c-toolbar__item--MinWidth--base	auto
--pf-v6-c-toolbar__item--MinWidth--base --pf-v6-c-toolbar__item--MinWidth auto
	.pf-v6-c-toolbar__item.pf-m-expand-all.pf-m-expanded	--pf-v6-c-toolbar__expand-all-icon--Rotate	-180deg
--pf-v6-c-toolbar__expand-all-icon--Rotate --pf-v6-c-toolbar__item--m-expand-all--m-expanded__expand-all-icon--Rotate -180deg