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

Empty state

Copied to clipboard

Empty state small

Copied to clipboard

Empty state large

Copied to clipboard

Props

EmptyState Props

The EmptyState component accepts the following props.

NameTypeRequiredDefaultDescription
classNamestring''Additional classes added to the EmptyState
childrenReact.ReactNodeContent rendered inside the EmptyState
variant'small' | 'large' | 'full'EmptyStateVariant.largeModifies EmptyState max-width

EmptyStateBody Props

The EmptyStateBody component accepts the following props.

NameTypeRequiredDefaultDescription
childrenReact.ReactNodeContent rendered inside the EmptyState
classNamestring''Additional classes added to the EmptyState

EmptyStateIcon Props

The EmptyStateIcon component accepts the following props.

NameTypeRequiredDefaultDescription
colorstring
size'sm' | 'md' | 'lg' | 'xl'
titlestring
classNamestring''Additional classes added to the EmptyState
iconstring | React.FunctionComponent<IconProps>Icon component to be rendered inside the EmptyState

EmptyStateSecondaryActions Props

The EmptyStateSecondaryActions component accepts the following props.

NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullContent rendered inside the EmptyState
classNamestring''Additional classes added to the EmptyState

CSS Variables

--pf-c-empty-state--Paddingc_empty_state_Padding2rem
--pf-c-empty-state__body--Colorc_empty_state__body_Color#72767b
--pf-c-empty-state__body--MarginTopc_empty_state__body_MarginTop1rem
--pf-c-empty-state__icon--Colorc_empty_state__icon_Color#72767b
--pf-c-empty-state__icon--FontSizec_empty_state__icon_FontSize3.375rem
--pf-c-empty-state__icon--MarginBottomc_empty_state__icon_MarginBottom1.5rem
--pf-c-empty-state__secondary--MarginBottomc_empty_state__secondary_MarginBottomcalc(0.25rem * -1)
--pf-c-empty-state__secondary--MarginRightc_empty_state__secondary_MarginRightcalc(0.25rem * -1)
--pf-c-empty-state__secondary--MarginTopc_empty_state__secondary_MarginTop2rem
--pf-c-empty-state__secondary--c-button--MarginBottomc_empty_state__secondary_c_button_MarginBottom0.25rem
--pf-c-empty-state__secondary--c-button--MarginRightc_empty_state__secondary_c_button_MarginRight0.25rem
--pf-c-empty-state--c-button--MarginTopc_empty_state_c_button_MarginTop2rem
--pf-c-empty-state--c-button__secondary--MarginTopc_empty_state_c_button__secondary_MarginTop0.5rem
--pf-c-empty-state--m-lg--MaxWidthc_empty_state_m_lg_MaxWidth37.5rem
--pf-c-empty-state--m-sm--MaxWidthc_empty_state_m_sm_MaxWidth25rem