Empty state

An empty state is a screen that is not yet populated with data or information. Empty states typically contain a short message and next steps for the user.

Examples

Basic

Empty state

This represents an the empty state pattern in Patternfly 4. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.

Extra small

Empty state

This represents an the empty state pattern in Patternfly 4. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.

Small

Empty state

This represents an the empty state pattern in Patternfly 4. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.

Large

Empty state

This represents an the empty state pattern in Patternfly 4. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.

Extra large

Empty state

This represents an the empty state pattern in Patternfly 4. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.

Spinner

Loading

No match found

No results found

No results match the filter criteria. Clear all filters and try again.

Props

EmptyState

*required
Name	Type	Default	Description
childrenrequired	React.ReactNode		Content rendered inside the EmptyState
className	string	''	Additional classes added to the EmptyState
isFullHeight	boolean		Cause component to consume the available height of its container
variant	'xs' \| 'small' \| 'large' \| 'xl' \| 'full'	EmptyStateVariant.full	Modifies EmptyState max-width

EmptyStateBody

*required
Name	Type	Default	Description
children	React.ReactNode		Content rendered inside the EmptyState
className	string	''	Additional classes added to the EmptyState

EmptyStateIcon

*required
Name	Type	Default	Description
className	string	''	Additional classes added to the EmptyState
color	string		Changes the color of the icon.
component	React.ComponentType<any>		Component to be rendered inside the EmptyState on container variant
icon	React.ComponentType<any>		Icon component to be rendered inside the EmptyState on icon variant Usually a CheckCircleIcon, ExclamationCircleIcon, LockIcon, PlusCircleIcon, RocketIcon SearchIcon, or WrenchIcon
variant	'icon' \| 'container'	'icon'	Adds empty state icon variant styles

EmptyStateSecondaryActions

*required
Name	Type	Default	Description
children	React.ReactNode	null	Content rendered inside the EmptyState
className	string	''	Additional classes added to the EmptyState

CSS variables


	.pf-c-empty-state	--pf-c-empty-state--PaddingTop	2rem
--pf-c-empty-state--PaddingTop --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-c-empty-state	--pf-c-empty-state--PaddingRight	2rem
--pf-c-empty-state--PaddingRight --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-c-empty-state	--pf-c-empty-state--PaddingBottom	2rem
--pf-c-empty-state--PaddingBottom --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-c-empty-state	--pf-c-empty-state--PaddingLeft	2rem
--pf-c-empty-state--PaddingLeft --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-c-empty-state	--pf-c-empty-state__content--MaxWidth	none
	.pf-c-empty-state	--pf-c-empty-state__icon--MarginBottom	1.5rem
--pf-c-empty-state__icon--MarginBottom --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-empty-state	--pf-c-empty-state__icon--FontSize	3.375rem
--pf-c-empty-state__icon--FontSize --pf-global--icon--FontSize--xl $pf-global--icon--FontSize--xl pf-font-prem(54px) 3.375rem
	.pf-c-empty-state	--pf-c-empty-state__icon--Color	#6a6e73
--pf-c-empty-state__icon--Color --pf-global--icon--Color--light $pf-global--icon--Color--light $pf-color-black-600 #6a6e73
	.pf-c-empty-state	--pf-c-empty-state__content--c-title--m-lg--FontSize	1.25rem
--pf-c-empty-state__content--c-title--m-lg--FontSize --pf-global--FontSize--xl $pf-global--FontSize--xl pf-font-prem(20px) 1.25rem
	.pf-c-empty-state	--pf-c-empty-state__body--MarginTop	1rem
--pf-c-empty-state__body--MarginTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-empty-state	--pf-c-empty-state__body--Color	#6a6e73
--pf-c-empty-state__body--Color --pf-global--Color--200 $pf-global--Color--200 $pf-color-black-600 #6a6e73
	.pf-c-empty-state	--pf-c-empty-state__primary--MarginTop	2rem
--pf-c-empty-state__primary--MarginTop --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-c-empty-state	--pf-c-empty-state__primary--secondary--MarginTop	0.5rem
--pf-c-empty-state__primary--secondary--MarginTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-empty-state	--pf-c-empty-state__secondary--MarginTop	2rem
--pf-c-empty-state__secondary--MarginTop --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-c-empty-state	--pf-c-empty-state__secondary--MarginBottom	calc(0.25rem * -1)
--pf-c-empty-state__secondary--MarginBottom calc(--pf-global--spacer--xs * -1) calc($pf-global--spacer--xs * -1) calc(pf-size-prem(4px) * -1) calc(0.25rem * -1)
	.pf-c-empty-state	--pf-c-empty-state__secondary--child--MarginRight	calc(0.25rem / 2)
--pf-c-empty-state__secondary--child--MarginRight calc(--pf-global--spacer--xs / 2) calc($pf-global--spacer--xs / 2) calc(pf-size-prem(4px) / 2) calc(0.25rem / 2)
	.pf-c-empty-state	--pf-c-empty-state__secondary--child--MarginBottom	0.25rem
--pf-c-empty-state__secondary--child--MarginBottom --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-empty-state	--pf-c-empty-state__secondary--child--MarginLeft	calc(0.25rem / 2)
--pf-c-empty-state__secondary--child--MarginLeft calc(--pf-global--spacer--xs / 2) calc($pf-global--spacer--xs / 2) calc(pf-size-prem(4px) / 2) calc(0.25rem / 2)
	.pf-c-empty-state	--pf-c-empty-state--m-xs__content--MaxWidth	21.875rem
	.pf-c-empty-state	--pf-c-empty-state--m-xs__body--FontSize	0.875rem
--pf-c-empty-state--m-xs__body--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-empty-state	--pf-c-empty-state--m-xs--button--FontSize	0.875rem
--pf-c-empty-state--m-xs--button--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-empty-state	--pf-c-empty-state--m-xs--PaddingTop	1rem
--pf-c-empty-state--m-xs--PaddingTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-empty-state	--pf-c-empty-state--m-xs--PaddingRight	1rem
--pf-c-empty-state--m-xs--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-empty-state	--pf-c-empty-state--m-xs--PaddingBottom	1rem
--pf-c-empty-state--m-xs--PaddingBottom --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-empty-state	--pf-c-empty-state--m-xs--PaddingLeft	1rem
--pf-c-empty-state--m-xs--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-empty-state	--pf-c-empty-state--m-xs__icon--MarginBottom	1rem
--pf-c-empty-state--m-xs__icon--MarginBottom --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-empty-state	--pf-c-empty-state--m-xs__body--MarginTop	1rem
--pf-c-empty-state--m-xs__body--MarginTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-empty-state	--pf-c-empty-state--m-xs__primary--MarginTop	1rem
--pf-c-empty-state--m-xs__primary--MarginTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-empty-state	--pf-c-empty-state--m-xs__secondary--MarginTop	1rem
--pf-c-empty-state--m-xs__secondary--MarginTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-empty-state	--pf-c-empty-state--m-sm__content--MaxWidth	25rem
	.pf-c-empty-state	--pf-c-empty-state--m-lg__content--MaxWidth	37.5rem
	.pf-c-empty-state	--pf-c-empty-state--m-xl__body--FontSize	1.25rem
--pf-c-empty-state--m-xl__body--FontSize --pf-global--FontSize--xl $pf-global--FontSize--xl pf-font-prem(20px) 1.25rem
	.pf-c-empty-state	--pf-c-empty-state--m-xl__body--MarginTop	1.5rem
--pf-c-empty-state--m-xl__body--MarginTop --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-empty-state	--pf-c-empty-state--m-xl__icon--MarginBottom	2rem
--pf-c-empty-state--m-xl__icon--MarginBottom --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-c-empty-state	--pf-c-empty-state--m-xl__icon--FontSize	6.25rem
	.pf-c-empty-state	--pf-c-empty-state--m-xl--c-button__secondary--MarginTop	1rem
--pf-c-empty-state--m-xl--c-button__secondary--MarginTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-empty-state.pf-m-xs	--pf-c-empty-state--PaddingTop	1rem
--pf-c-empty-state--PaddingTop --pf-c-empty-state--m-xs--PaddingTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-empty-state.pf-m-xs	--pf-c-empty-state--PaddingRight	1rem
--pf-c-empty-state--PaddingRight --pf-c-empty-state--m-xs--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-empty-state.pf-m-xs	--pf-c-empty-state--PaddingBottom	1rem
--pf-c-empty-state--PaddingBottom --pf-c-empty-state--m-xs--PaddingBottom --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-empty-state.pf-m-xs	--pf-c-empty-state--PaddingLeft	1rem
--pf-c-empty-state--PaddingLeft --pf-c-empty-state--m-xs--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-empty-state.pf-m-xs	--pf-c-empty-state__content--MaxWidth	21.875rem
--pf-c-empty-state__content--MaxWidth --pf-c-empty-state--m-xs__content--MaxWidth 21.875rem
	.pf-c-empty-state.pf-m-xs	--pf-c-empty-state__icon--MarginBottom	1rem
--pf-c-empty-state__icon--MarginBottom --pf-c-empty-state--m-xs__icon--MarginBottom --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-empty-state.pf-m-xs	--pf-c-empty-state__body--MarginTop	1rem
--pf-c-empty-state__body--MarginTop --pf-c-empty-state--m-xs__body--MarginTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-empty-state.pf-m-xs	--pf-c-empty-state__primary--MarginTop	1rem
--pf-c-empty-state__primary--MarginTop --pf-c-empty-state--m-xs__primary--MarginTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-empty-state.pf-m-xs	--pf-c-empty-state__secondary--MarginTop	1rem
--pf-c-empty-state__secondary--MarginTop --pf-c-empty-state--m-xs__secondary--MarginTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-empty-state.pf-m-xs .pf-c-button	--pf-c-button--FontSize	0.875rem
--pf-c-button--FontSize --pf-c-empty-state--m-xs--button--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-empty-state.pf-m-sm	--pf-c-empty-state__content--MaxWidth	25rem
--pf-c-empty-state__content--MaxWidth --pf-c-empty-state--m-sm__content--MaxWidth 25rem
	.pf-c-empty-state.pf-m-lg	--pf-c-empty-state__content--MaxWidth	37.5rem
--pf-c-empty-state__content--MaxWidth --pf-c-empty-state--m-lg__content--MaxWidth 37.5rem
	.pf-c-empty-state.pf-m-xl	--pf-c-empty-state__body--MarginTop	1.5rem
--pf-c-empty-state__body--MarginTop --pf-c-empty-state--m-xl__body--MarginTop --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-empty-state.pf-m-xl	--pf-c-empty-state__icon--MarginBottom	2rem
--pf-c-empty-state__icon--MarginBottom --pf-c-empty-state--m-xl__icon--MarginBottom --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-c-empty-state.pf-m-xl	--pf-c-empty-state__icon--FontSize	6.25rem
--pf-c-empty-state__icon--FontSize --pf-c-empty-state--m-xl__icon--FontSize 6.25rem
	.pf-c-empty-state.pf-m-xl	--pf-c-empty-state--c-button__secondary--MarginTop	1rem
--pf-c-empty-state--c-button__secondary--MarginTop --pf-c-empty-state--m-xl--c-button__secondary--MarginTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

Privacy statement Terms of use All policies and guidelines