Empty state

An empty state is a screen that is not yet populated with data or information—typically containing a short message and next steps for users.

CSS variables

Expand or collapse column	Selector	Variable	Value
	.pf-v6-c-empty-state	--pf-v6-c-empty-state--PaddingBlockStart	2rem
--pf-v6-c-empty-state--PaddingBlockStart --pf-t--global--spacer--xl --pf-t--global--spacer--500 2rem
	.pf-v6-c-empty-state	--pf-v6-c-empty-state--PaddingInlineEnd	2rem
--pf-v6-c-empty-state--PaddingInlineEnd --pf-t--global--spacer--xl --pf-t--global--spacer--500 2rem
	.pf-v6-c-empty-state	--pf-v6-c-empty-state--PaddingBlockEnd	2rem
--pf-v6-c-empty-state--PaddingBlockEnd --pf-t--global--spacer--xl --pf-t--global--spacer--500 2rem
	.pf-v6-c-empty-state	--pf-v6-c-empty-state--PaddingInlineStart	2rem
--pf-v6-c-empty-state--PaddingInlineStart --pf-t--global--spacer--xl --pf-t--global--spacer--500 2rem
	.pf-v6-c-empty-state	--pf-v6-c-empty-state--m-xs--PaddingBlockStart	1rem
--pf-v6-c-empty-state--m-xs--PaddingBlockStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-empty-state	--pf-v6-c-empty-state--m-xs--PaddingInlineEnd	1rem
--pf-v6-c-empty-state--m-xs--PaddingInlineEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-empty-state	--pf-v6-c-empty-state--m-xs--PaddingBlockEnd	1rem
--pf-v6-c-empty-state--m-xs--PaddingBlockEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-empty-state	--pf-v6-c-empty-state--m-xs--PaddingInlineStart	1rem
--pf-v6-c-empty-state--m-xs--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-empty-state	--pf-v6-c-empty-state__content--MaxWidth	none
	.pf-v6-c-empty-state	--pf-v6-c-empty-state--m-xs__content--MaxWidth	21.875rem
	.pf-v6-c-empty-state	--pf-v6-c-empty-state--m-sm__content--MaxWidth	25rem
	.pf-v6-c-empty-state	--pf-v6-c-empty-state--m-lg__content--MaxWidth	37.5rem
	.pf-v6-c-empty-state	--pf-v6-c-empty-state__icon--MarginBlockEnd	1.5rem
--pf-v6-c-empty-state__icon--MarginBlockEnd --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-empty-state	--pf-v6-c-empty-state__icon--FontSize	3.5rem
--pf-v6-c-empty-state__icon--FontSize --pf-t--global--icon--size--2xl --pf-t--global--icon--size--400 3.5rem
	.pf-v6-c-empty-state	--pf-v6-c-empty-state__icon--Color	(In light theme) #707070
--pf-v6-c-empty-state__icon--Color --pf-t--global--icon--color--subtle --pf-t--global--icon--color--200 --pf-t--color--gray--50 #707070
	.pf-v6-c-empty-state	--pf-v6-c-empty-state--m-xs__icon--MarginBlockEnd	1.5rem
--pf-v6-c-empty-state--m-xs__icon--MarginBlockEnd --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-empty-state	--pf-v6-c-empty-state--m-xl__icon--MarginBlockEnd	2rem
--pf-v6-c-empty-state--m-xl__icon--MarginBlockEnd --pf-t--global--spacer--xl --pf-t--global--spacer--500 2rem
	.pf-v6-c-empty-state	--pf-v6-c-empty-state--m-xl__icon--FontSize	6rem
--pf-v6-c-empty-state--m-xl__icon--FontSize --pf-t--global--icon--size--3xl --pf-t--global--icon--size--500 6rem
	.pf-v6-c-empty-state	--pf-v6-c-empty-state--m-danger__icon--Color	(In light theme) #b1380b
--pf-v6-c-empty-state--m-danger__icon--Color --pf-t--global--icon--color--status--danger--default --pf-t--global--color--status--danger--default --pf-t--global--color--status--danger--100 --pf-t--color--red-orange--60 #b1380b
	.pf-v6-c-empty-state	--pf-v6-c-empty-state--m-warning__icon--Color	(In light theme) #dca614
--pf-v6-c-empty-state--m-warning__icon--Color --pf-t--global--icon--color--status--warning--default --pf-t--global--color--status--warning--200 --pf-t--color--yellow--40 #dca614
	.pf-v6-c-empty-state	--pf-v6-c-empty-state--m-success__icon--Color	(In light theme) #3d7317
--pf-v6-c-empty-state--m-success__icon--Color --pf-t--global--icon--color--status--success--default --pf-t--global--color--status--success--default --pf-t--global--color--status--success--100 --pf-t--color--green--60 #3d7317
	.pf-v6-c-empty-state	--pf-v6-c-empty-state--m-info__icon--Color	(In light theme) #5e40be
--pf-v6-c-empty-state--m-info__icon--Color --pf-t--global--icon--color--status--info--default --pf-t--global--color--status--info--default --pf-t--global--color--status--info--100 --pf-t--color--purple--50 #5e40be
	.pf-v6-c-empty-state	--pf-v6-c-empty-state--m-custom__icon--Color	(In light theme) #147878
--pf-v6-c-empty-state--m-custom__icon--Color --pf-t--global--icon--color--status--custom--default --pf-t--global--color--status--custom--default --pf-t--global--color--status--custom--100 --pf-t--color--teal--60 #147878
	.pf-v6-c-empty-state	--pf-v6-c-empty-state__title-text--FontFamily	"Red Hat Display", "RedHatDisplay", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif
--pf-v6-c-empty-state__title-text--FontFamily --pf-t--global--font--family--heading --pf-t--global--font--family--200 "Red Hat Display", "RedHatDisplay", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif
	.pf-v6-c-empty-state	--pf-v6-c-empty-state__title-text--FontSize	1.25rem
--pf-v6-c-empty-state__title-text--FontSize --pf-t--global--font--size--heading--md --pf-t--global--font--size--xl --pf-t--global--font--size--500 1.25rem
	.pf-v6-c-empty-state	--pf-v6-c-empty-state__title-text--FontWeight	600
--pf-v6-c-empty-state__title-text--FontWeight --pf-t--global--font--weight--heading--default --pf-t--global--font--weight--300 600
	.pf-v6-c-empty-state	--pf-v6-c-empty-state__title-text--LineHeight	1.3
--pf-v6-c-empty-state__title-text--LineHeight --pf-t--global--font--line-height--heading --pf-t--global--font--line-height--100 1.3
	.pf-v6-c-empty-state	--pf-v6-c-empty-state--m-xs__title-text--FontSize	1rem
--pf-v6-c-empty-state--m-xs__title-text--FontSize --pf-t--global--font--size--heading--xs --pf-t--global--font--size--md --pf-t--global--font--size--300 1rem
	.pf-v6-c-empty-state	--pf-v6-c-empty-state--m-xl__title-text--FontSize	2.25rem
--pf-v6-c-empty-state--m-xl__title-text--FontSize --pf-t--global--font--size--heading--2xl --pf-t--global--font--size--4xl --pf-t--global--font--size--800 2.25rem
	.pf-v6-c-empty-state	--pf-v6-c-empty-state--m-xl__title-text--LineHeight	1.3
--pf-v6-c-empty-state--m-xl__title-text--LineHeight --pf-t--global--font--line-height--heading --pf-t--global--font--line-height--100 1.3
	.pf-v6-c-empty-state	--pf-v6-c-empty-state__body--MarginBlockStart	1rem
--pf-v6-c-empty-state__body--MarginBlockStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-empty-state	--pf-v6-c-empty-state__body--Color	(In light theme) #4d4d4d
--pf-v6-c-empty-state__body--Color --pf-t--global--text--color--subtle --pf-t--global--text--color--200 --pf-t--color--gray--60 #4d4d4d
	.pf-v6-c-empty-state	--pf-v6-c-empty-state--body--FontSize	1rem
--pf-v6-c-empty-state--body--FontSize --pf-t--global--font--size--body--lg --pf-t--global--font--size--md --pf-t--global--font--size--300 1rem
	.pf-v6-c-empty-state	--pf-v6-c-empty-state--m-xs__body--FontSize	1rem
--pf-v6-c-empty-state--m-xs__body--FontSize --pf-t--global--font--size--body--lg --pf-t--global--font--size--md --pf-t--global--font--size--300 1rem
	.pf-v6-c-empty-state	--pf-v6-c-empty-state--m-xs__body--MarginBlockStart	1rem
--pf-v6-c-empty-state--m-xs__body--MarginBlockStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-empty-state	--pf-v6-c-empty-state--m-xl__body--FontSize	1rem
--pf-v6-c-empty-state--m-xl__body--FontSize --pf-t--global--font--size--body--lg --pf-t--global--font--size--md --pf-t--global--font--size--300 1rem
	.pf-v6-c-empty-state	--pf-v6-c-empty-state--m-xl__body--MarginBlockStart	2rem
--pf-v6-c-empty-state--m-xl__body--MarginBlockStart --pf-t--global--spacer--xl --pf-t--global--spacer--500 2rem
	.pf-v6-c-empty-state	--pf-v6-c-empty-state__footer--RowGap	1.5rem
--pf-v6-c-empty-state__footer--RowGap --pf-t--global--spacer--gap--group-to-group--vertical--default --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-empty-state	--pf-v6-c-empty-state__footer--MarginBlockStart	2rem
--pf-v6-c-empty-state__footer--MarginBlockStart --pf-t--global--spacer--xl --pf-t--global--spacer--500 2rem
	.pf-v6-c-empty-state	--pf-v6-c-empty-state--m-xs__footer--MarginBlockStart	1rem
--pf-v6-c-empty-state--m-xs__footer--MarginBlockStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-empty-state	--pf-v6-c-empty-state__actions--RowGap	0.5rem
--pf-v6-c-empty-state__actions--RowGap --pf-t--global--spacer--gap--group--vertical --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-empty-state	--pf-v6-c-empty-state__actions--ColumnGap	1rem
--pf-v6-c-empty-state__actions--ColumnGap --pf-t--global--spacer--gap--action-to-action--default --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-empty-state.pf-m-xs	--pf-v6-c-empty-state--PaddingBlockStart	1rem
--pf-v6-c-empty-state--PaddingBlockStart --pf-v6-c-empty-state--m-xs--PaddingBlockStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-empty-state.pf-m-xs	--pf-v6-c-empty-state--PaddingInlineEnd	1rem
--pf-v6-c-empty-state--PaddingInlineEnd --pf-v6-c-empty-state--m-xs--PaddingInlineEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-empty-state.pf-m-xs	--pf-v6-c-empty-state--PaddingBlockEnd	1rem
--pf-v6-c-empty-state--PaddingBlockEnd --pf-v6-c-empty-state--m-xs--PaddingBlockEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-empty-state.pf-m-xs	--pf-v6-c-empty-state--PaddingInlineStart	1rem
--pf-v6-c-empty-state--PaddingInlineStart --pf-v6-c-empty-state--m-xs--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-empty-state.pf-m-xs	--pf-v6-c-empty-state__title-text--FontSize	1rem
--pf-v6-c-empty-state__title-text--FontSize --pf-v6-c-empty-state--m-xs__title-text--FontSize --pf-t--global--font--size--heading--xs --pf-t--global--font--size--md --pf-t--global--font--size--300 1rem
	.pf-v6-c-empty-state.pf-m-xs	--pf-v6-c-empty-state__content--MaxWidth	21.875rem
--pf-v6-c-empty-state__content--MaxWidth --pf-v6-c-empty-state--m-xs__content--MaxWidth 21.875rem
	.pf-v6-c-empty-state.pf-m-xs	--pf-v6-c-empty-state__icon--MarginBlockEnd	1.5rem
--pf-v6-c-empty-state__icon--MarginBlockEnd --pf-v6-c-empty-state--m-xs__icon--MarginBlockEnd --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-empty-state.pf-m-xs	--pf-v6-c-empty-state__body--MarginBlockStart	1rem
--pf-v6-c-empty-state__body--MarginBlockStart --pf-v6-c-empty-state--m-xs__body--MarginBlockStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-empty-state.pf-m-xs	--pf-v6-c-empty-state--body--FontSize	1rem
--pf-v6-c-empty-state--body--FontSize --pf-v6-c-empty-state--m-xs__body--FontSize --pf-t--global--font--size--body--lg --pf-t--global--font--size--md --pf-t--global--font--size--300 1rem
	.pf-v6-c-empty-state.pf-m-xs	--pf-v6-c-empty-state__footer--MarginBlockStart	1rem
--pf-v6-c-empty-state__footer--MarginBlockStart --pf-v6-c-empty-state--m-xs__footer--MarginBlockStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-empty-state.pf-m-sm	--pf-v6-c-empty-state__content--MaxWidth	25rem
--pf-v6-c-empty-state__content--MaxWidth --pf-v6-c-empty-state--m-sm__content--MaxWidth 25rem
	.pf-v6-c-empty-state.pf-m-lg	--pf-v6-c-empty-state__content--MaxWidth	37.5rem
--pf-v6-c-empty-state__content--MaxWidth --pf-v6-c-empty-state--m-lg__content--MaxWidth 37.5rem
	.pf-v6-c-empty-state.pf-m-xl	--pf-v6-c-empty-state__body--MarginBlockStart	2rem
--pf-v6-c-empty-state__body--MarginBlockStart --pf-v6-c-empty-state--m-xl__body--MarginBlockStart --pf-t--global--spacer--xl --pf-t--global--spacer--500 2rem
	.pf-v6-c-empty-state.pf-m-xl	--pf-v6-c-empty-state--body--FontSize	1rem
--pf-v6-c-empty-state--body--FontSize --pf-v6-c-empty-state--m-xl__body--FontSize --pf-t--global--font--size--body--lg --pf-t--global--font--size--md --pf-t--global--font--size--300 1rem
	.pf-v6-c-empty-state.pf-m-xl	--pf-v6-c-empty-state__icon--MarginBlockEnd	2rem
--pf-v6-c-empty-state__icon--MarginBlockEnd --pf-v6-c-empty-state--m-xl__icon--MarginBlockEnd --pf-t--global--spacer--xl --pf-t--global--spacer--500 2rem
	.pf-v6-c-empty-state.pf-m-xl	--pf-v6-c-empty-state__icon--FontSize	6rem
--pf-v6-c-empty-state__icon--FontSize --pf-v6-c-empty-state--m-xl__icon--FontSize --pf-t--global--icon--size--3xl --pf-t--global--icon--size--500 6rem
	.pf-v6-c-empty-state.pf-m-xl	--pf-v6-c-empty-state__title-text--FontSize	2.25rem
--pf-v6-c-empty-state__title-text--FontSize --pf-v6-c-empty-state--m-xl__title-text--FontSize --pf-t--global--font--size--heading--2xl --pf-t--global--font--size--4xl --pf-t--global--font--size--800 2.25rem
	.pf-v6-c-empty-state.pf-m-xl	--pf-v6-c-empty-state__title-text--LineHeight	1.3
--pf-v6-c-empty-state__title-text--LineHeight --pf-v6-c-empty-state--m-xl__title-text--LineHeight --pf-t--global--font--line-height--heading --pf-t--global--font--line-height--100 1.3
	.pf-v6-c-empty-state.pf-m-danger	--pf-v6-c-empty-state__icon--Color	(In light theme) #b1380b
--pf-v6-c-empty-state__icon--Color --pf-v6-c-empty-state--m-danger__icon--Color --pf-t--global--icon--color--status--danger--default --pf-t--global--color--status--danger--default --pf-t--global--color--status--danger--100 --pf-t--color--red-orange--60 #b1380b
	.pf-v6-c-empty-state.pf-m-warning	--pf-v6-c-empty-state__icon--Color	(In light theme) #dca614
--pf-v6-c-empty-state__icon--Color --pf-v6-c-empty-state--m-warning__icon--Color --pf-t--global--icon--color--status--warning--default --pf-t--global--color--status--warning--200 --pf-t--color--yellow--40 #dca614
	.pf-v6-c-empty-state.pf-m-success	--pf-v6-c-empty-state__icon--Color	(In light theme) #3d7317
--pf-v6-c-empty-state__icon--Color --pf-v6-c-empty-state--m-success__icon--Color --pf-t--global--icon--color--status--success--default --pf-t--global--color--status--success--default --pf-t--global--color--status--success--100 --pf-t--color--green--60 #3d7317
	.pf-v6-c-empty-state.pf-m-info	--pf-v6-c-empty-state__icon--Color	(In light theme) #5e40be
--pf-v6-c-empty-state__icon--Color --pf-v6-c-empty-state--m-info__icon--Color --pf-t--global--icon--color--status--info--default --pf-t--global--color--status--info--default --pf-t--global--color--status--info--100 --pf-t--color--purple--50 #5e40be
	.pf-v6-c-empty-state.pf-m-custom	--pf-v6-c-empty-state__icon--Color	(In light theme) #147878
--pf-v6-c-empty-state__icon--Color --pf-v6-c-empty-state--m-custom__icon--Color --pf-t--global--icon--color--status--custom--default --pf-t--global--color--status--custom--default --pf-t--global--color--status--custom--100 --pf-t--color--teal--60 #147878