React

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.

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
classNamestring''Additional classes added to the EmptyState
childrenReact.ReactNodeContent rendered inside the EmptyState
variant'small' | 'large' | 'full'EmptyStateVariant.largeModifies EmptyState max-width
EmptyStateBody properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeContent rendered inside the EmptyState
classNamestring''Additional classes added to the EmptyState
EmptyStateIcon properties
NameTypeRequiredDefaultDescription
colorstring
size'sm' | 'md' | 'lg' | 'xl'
titlestring
classNamestring''Additional classes added to the EmptyState
iconstring | React.FunctionComponent<IconProps>nullIcon component to be rendered inside the EmptyState on icon variant
componentReact.FunctionComponent<any>nullComponent to be rendered inside the EmptyState on container variant
variant'icon' | 'container''icon'Adds empty state icon variant styles
EmptyStateSecondaryActions properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullContent rendered inside the EmptyState
classNamestring''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
1rem
--pf-c-empty-state__icon--Colorc_empty_state__icon_Color
#737679
--pf-c-empty-state__icon--FontSizec_empty_state__icon_FontSize
3.375rem
--pf-c-empty-state__icon--MarginBottomc_empty_state__icon_MarginBottom
1.5rem
--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
0.5rem
--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--Paddingc_empty_state_Padding
2rem