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

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. The empty state centers its content (.pf-c-empty-state__content) vertically and horizontally. Required
.pf-c-empty-state__content<div>Creates the content container. 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.
.pf-m-xl.pf-c-empty-stateModifies the empty state for a x-large max-width.
.pf-m-full-height.pf-c-empty-stateModifies the empty state to be height: 100%. If you need the empty state content to be centered vertically, you can use this modifier to make the empty state fill the height of its container, and center .pf-c-empty-state__content. Note: this modifier requires the parent of .pf-c-empty-state have an implicit or explicit height defined.

CSS Variables

.pf-c-empty-state--pf-c-empty-state--PaddingTopc_empty_state_PaddingTop
2rem
.pf-c-empty-state--pf-c-empty-state--PaddingRightc_empty_state_PaddingRight
2rem
.pf-c-empty-state--pf-c-empty-state--PaddingBottomc_empty_state_PaddingBottom
2rem
.pf-c-empty-state--pf-c-empty-state--PaddingLeftc_empty_state_PaddingLeft
2rem
.pf-c-empty-state--pf-c-empty-state__content--MaxWidthc_empty_state__content_MaxWidth
none
.pf-c-empty-state--pf-c-empty-state__icon--MarginBottomc_empty_state__icon_MarginBottom
1.5rem
.pf-c-empty-state--pf-c-empty-state__icon--FontSizec_empty_state__icon_FontSize
3.375rem
.pf-c-empty-state--pf-c-empty-state__icon--Colorc_empty_state__icon_Color
#6a6e73
.pf-c-empty-state--pf-c-empty-state__content--c-title--m-lg--FontSizec_empty_state__content_c_title_m_lg_FontSize
1.25rem
.pf-c-empty-state--pf-c-empty-state__body--MarginTopc_empty_state__body_MarginTop
1rem
.pf-c-empty-state--pf-c-empty-state__body--Colorc_empty_state__body_Color
#6a6e73
.pf-c-empty-state--pf-c-empty-state__primary--MarginTopc_empty_state__primary_MarginTop
2rem
.pf-c-empty-state--pf-c-empty-state__primary--secondary--MarginTopc_empty_state__primary_secondary_MarginTop
0.5rem
.pf-c-empty-state--pf-c-empty-state__secondary--MarginTopc_empty_state__secondary_MarginTop
2rem
.pf-c-empty-state--pf-c-empty-state__secondary--MarginBottomc_empty_state__secondary_MarginBottom
calc(0.25rem * -1)
.pf-c-empty-state--pf-c-empty-state__secondary--child--MarginRightc_empty_state__secondary_child_MarginRight
calc(0.25rem / 2)
.pf-c-empty-state--pf-c-empty-state__secondary--child--MarginBottomc_empty_state__secondary_child_MarginBottom
0.25rem
.pf-c-empty-state--pf-c-empty-state__secondary--child--MarginLeftc_empty_state__secondary_child_MarginLeft
calc(0.25rem / 2)
.pf-c-empty-state--pf-c-empty-state--m-sm__content--MaxWidthc_empty_state_m_sm__content_MaxWidth
25rem
.pf-c-empty-state--pf-c-empty-state--m-lg__content--MaxWidthc_empty_state_m_lg__content_MaxWidth
37.5rem
.pf-c-empty-state--pf-c-empty-state--m-xl__body--FontSizec_empty_state_m_xl__body_FontSize
1.25rem
.pf-c-empty-state--pf-c-empty-state--m-xl__body--MarginTopc_empty_state_m_xl__body_MarginTop
1.5rem
.pf-c-empty-state--pf-c-empty-state--m-xl__icon--MarginBottomc_empty_state_m_xl__icon_MarginBottom
2rem
.pf-c-empty-state--pf-c-empty-state--m-xl__icon--FontSizec_empty_state_m_xl__icon_FontSize
6.25rem
.pf-c-empty-state--pf-c-empty-state--m-xl--c-button__secondary--MarginTopc_empty_state_m_xl_c_button__secondary_MarginTop
1rem
.pf-c-empty-state.pf-m-sm--pf-c-empty-state__content--MaxWidthc_empty_state__content_MaxWidth
25rem
.pf-c-empty-state.pf-m-lg--pf-c-empty-state__content--MaxWidthc_empty_state__content_MaxWidth
37.5rem
.pf-c-empty-state.pf-m-xl--pf-c-empty-state__body--MarginTopc_empty_state__body_MarginTop
1.5rem
.pf-c-empty-state.pf-m-xl--pf-c-empty-state__icon--MarginBottomc_empty_state__icon_MarginBottom
2rem
.pf-c-empty-state.pf-m-xl--pf-c-empty-state__icon--FontSizec_empty_state__icon_FontSize
6.25rem
.pf-c-empty-state.pf-m-xl--pf-c-empty-state--c-button__secondary--MarginTopc_empty_state_c_button__secondary_MarginTop
1rem