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.

ExamplesDocumentationCSS Variables

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.

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.

With primary element

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.

Documentation

Accessibility

AttributeApplied toOutcome
aria-hidden="true".pf-c-empty-state__iconHides icon for assistive technologies. Required

Usage

ClassApplied toOutcome
.pf-c-empty-state<div>Initiates an empty state component. Required
.pf-c-empty-state__icon<i>, <div>Creates the empty state icon or icon container when used as a <div>.
.pf-c-title<h1>, <h2>, <h3>, <h4>, <h5>, <h6>Creates the empty state title. Required
.pf-c-empty-state__body<div>Creates the empty state body content. You can have more than one .pf-c-empty-state__body elements.
.pf-c-button.pf-m-primary<button>Creates the primary action button.
.pf-c-empty-state__primary<div>Container for primary actions. Can be used in lieu of using .pf-c-button.pf-m-primary.
.pf-c-empty-state__secondary<div>Container secondary actions.
.pf-m-sm.pf-c-empty-stateModifies the empty state for a small max-width
.pf-m-lg.pf-c-empty-stateModifies the empty state for a large max-width

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