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

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.

Copied to clipboard

Empty state 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.

Copied to clipboard

Empty state 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.

Copied to clipboard

Props

EmptyState Props

The EmptyState component accepts the following props.

NameTypeRequiredDefaultDescription
classNamestring''Additional classes added to the EmptyState
childrennodeContent rendered inside the EmptyState
variantenum'large'Modifies EmptyState max-width
anyAdditional props are spread to the container <div>

EmptyStateBody Props

The EmptyStateBody component accepts the following props.

NameTypeRequiredDefaultDescription
classNamestring''Additional classes added to the EmptyState
childrennodeContent rendered inside the EmptyState
anyAdditional props are spread to the container <p>

EmptyStateIcon Props

The EmptyStateIcon component accepts the following props.

NameTypeRequiredDefaultDescription
classNamestring''Additional classes added to the EmptyState
iconunionIcon component to be rendered inside the EmptyState
anyAdditional props are spread to the Icon

EmptyStateSecondaryActions Props

The EmptyStateSecondaryActions component accepts the following props.

NameTypeRequiredDefaultDescription
classNamestring''Additional classes added to the EmptyState
childrennodenullContent rendered inside the EmptyState
anyAdditional props are spread to the container <div>

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