Skip to Content
Patternfly Logo

Empty state

Use an empty state component when there is no data or other information to show. It can also be used to communicate completion or other status at the end of a sequential task. An empty state may include a call to action to guide the user on what to do next. Related design guidelines: Empty state

ExamplesPropsCSS Variables

Examples

Single

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.

Spinner

Loading

No match found

No results found

No results match the filter criteria. Remove all filters or clear all filters to show results.

Props

EmptyState properties
NameTypeRequiredDefaultDescription
classNamestringNo''Additional classes added to the EmptyState
childrenReact.ReactNodeYesContent rendered inside the EmptyState
variant'small' | 'large' | 'full'NoEmptyStateVariant.largeModifies EmptyState max-width
EmptyStateBody properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNoContent rendered inside the EmptyState
classNamestringNo''Additional classes added to the EmptyState
EmptyStateIcon properties
NameTypeRequiredDefaultDescription
colorstringNodeprecated
size'sm' | 'md' | 'lg' | 'xl'Nodeprecated
titlestringNodeprecated
classNamestringNo''Additional classes added to the EmptyState
iconstring | React.FunctionComponent<IconProps>NonullIcon component to be rendered inside the EmptyState on icon variant
componentReact.FunctionComponent<any>NonullComponent to be rendered inside the EmptyState on container variant
variant'icon' | 'container'No'icon'Adds empty state icon variant styles
EmptyStateSecondaryActions properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullContent rendered inside the EmptyState
classNamestringNo''Additional classes added to the EmptyState

CSS Variables

--pf-c-empty-state__body--Colorc_empty_state__body_Color
#737679
--pf-c-empty-state__body--MarginTopc_empty_state__body_MarginTop
1.5rem
--pf-c-empty-state__icon--Colorc_empty_state__icon_Color
#737679
--pf-c-empty-state__icon--FontSizec_empty_state__icon_FontSize
6.25rem
--pf-c-empty-state__icon--MarginBottomc_empty_state__icon_MarginBottom
2rem
--pf-c-empty-state__secondary--c-button--MarginBottomc_empty_state__secondary_c_button_MarginBottom
0.25rem
--pf-c-empty-state__secondary--c-button--MarginRightc_empty_state__secondary_c_button_MarginRight
0.25rem
--pf-c-empty-state__secondary--MarginBottomc_empty_state__secondary_MarginBottom
calc(0.25rem*-1)
--pf-c-empty-state__secondary--MarginRightc_empty_state__secondary_MarginRight
calc(0.25rem*-1)
--pf-c-empty-state__secondary--MarginTopc_empty_state__secondary_MarginTop
2rem
--pf-c-empty-state--c-button__secondary--MarginTopc_empty_state_c_button__secondary_MarginTop
1rem
--pf-c-empty-state--c-button--MarginTopc_empty_state_c_button_MarginTop
2rem
--pf-c-empty-state--m-lg--MaxWidthc_empty_state_m_lg_MaxWidth
37.5rem
--pf-c-empty-state--m-sm--MaxWidthc_empty_state_m_sm_MaxWidth
25rem
--pf-c-empty-state--m-xl__body--FontSizec_empty_state_m_xl__body_FontSize
1.25rem
--pf-c-empty-state--m-xl__body--MarginTopc_empty_state_m_xl__body_MarginTop
1.5rem
--pf-c-empty-state--m-xl__icon--FontSizec_empty_state_m_xl__icon_FontSize
6.25rem
--pf-c-empty-state--m-xl__icon--MarginBottomc_empty_state_m_xl__icon_MarginBottom
2rem
--pf-c-empty-state--m-xl--c-button__secondary--MarginTopc_empty_state_m_xl_c_button__secondary_MarginTop
1rem
--pf-c-empty-state--Paddingc_empty_state_Padding
2rem