Skip to content
PatternFly logo

Empty state

An empty state is a screen that is not yet populated with data or information. Empty states typically contain a short message and next steps for the user.

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.

Extra 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.

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

Attribute
Applied to
Outcome
aria-hidden="true"
.pf-c-empty-state__icon
Hides icon for assistive technologies. Required

Usage

Class
Applied to
Outcome
.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-xs
.pf-c-empty-state
Modifies the empty state for a extra small variation and max-width.
.pf-m-sm
.pf-c-empty-state
Modifies the empty state for a small max-width.
.pf-m-lg
.pf-c-empty-state
Modifies the empty state for a large max-width.
.pf-m-xl
.pf-c-empty-state
Modifies the empty state for an x-large variation and max-width.
.pf-m-full-height
.pf-c-empty-state
Modifies 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--PaddingTop
2rem
.pf-c-empty-state--pf-c-empty-state--PaddingRight
2rem
.pf-c-empty-state--pf-c-empty-state--PaddingBottom
2rem
.pf-c-empty-state--pf-c-empty-state--PaddingLeft
2rem
.pf-c-empty-state--pf-c-empty-state__content--MaxWidth
none
.pf-c-empty-state--pf-c-empty-state__icon--MarginBottom
1.5rem
.pf-c-empty-state--pf-c-empty-state__icon--FontSize
3.375rem
.pf-c-empty-state--pf-c-empty-state__icon--Color
#6a6e73
.pf-c-empty-state--pf-c-empty-state__content--c-title--m-lg--FontSize
1.25rem
.pf-c-empty-state--pf-c-empty-state__body--MarginTop
1rem
.pf-c-empty-state--pf-c-empty-state__body--Color
#6a6e73
.pf-c-empty-state--pf-c-empty-state__primary--MarginTop
2rem
.pf-c-empty-state--pf-c-empty-state__primary--secondary--MarginTop
0.5rem
.pf-c-empty-state--pf-c-empty-state__secondary--MarginTop
2rem
.pf-c-empty-state--pf-c-empty-state__secondary--MarginBottom
calc(0.25rem * -1)
.pf-c-empty-state--pf-c-empty-state__secondary--child--MarginRight
calc(0.25rem / 2)
.pf-c-empty-state--pf-c-empty-state__secondary--child--MarginBottom
0.25rem
.pf-c-empty-state--pf-c-empty-state__secondary--child--MarginLeft
calc(0.25rem / 2)
.pf-c-empty-state--pf-c-empty-state--m-xs__content--MaxWidth
21.875rem
.pf-c-empty-state--pf-c-empty-state--m-xs__body--FontSize
0.875rem
.pf-c-empty-state--pf-c-empty-state--m-xs--button--FontSize
0.875rem
.pf-c-empty-state--pf-c-empty-state--m-xs--PaddingTop
1rem
.pf-c-empty-state--pf-c-empty-state--m-xs--PaddingRight
1rem
.pf-c-empty-state--pf-c-empty-state--m-xs--PaddingBottom
1rem
.pf-c-empty-state--pf-c-empty-state--m-xs--PaddingLeft
1rem
.pf-c-empty-state--pf-c-empty-state--m-xs__icon--MarginBottom
1rem
.pf-c-empty-state--pf-c-empty-state--m-xs__body--MarginTop
1rem
.pf-c-empty-state--pf-c-empty-state--m-xs__primary--MarginTop
1rem
.pf-c-empty-state--pf-c-empty-state--m-xs__secondary--MarginTop
1rem
.pf-c-empty-state--pf-c-empty-state--m-sm__content--MaxWidth
25rem
.pf-c-empty-state--pf-c-empty-state--m-lg__content--MaxWidth
37.5rem
.pf-c-empty-state--pf-c-empty-state--m-xl__body--FontSize
1.25rem
.pf-c-empty-state--pf-c-empty-state--m-xl__body--MarginTop
1.5rem
.pf-c-empty-state--pf-c-empty-state--m-xl__icon--MarginBottom
2rem
.pf-c-empty-state--pf-c-empty-state--m-xl__icon--FontSize
6.25rem
.pf-c-empty-state--pf-c-empty-state--m-xl--c-button__secondary--MarginTop
1rem
.pf-c-empty-state.pf-m-xs--pf-c-empty-state--PaddingTop
1rem
.pf-c-empty-state.pf-m-xs--pf-c-empty-state--PaddingRight
1rem
.pf-c-empty-state.pf-m-xs--pf-c-empty-state--PaddingBottom
1rem
.pf-c-empty-state.pf-m-xs--pf-c-empty-state--PaddingLeft
1rem
.pf-c-empty-state.pf-m-xs--pf-c-empty-state__content--MaxWidth
21.875rem
.pf-c-empty-state.pf-m-xs--pf-c-empty-state__icon--MarginBottom
1rem
.pf-c-empty-state.pf-m-xs--pf-c-empty-state__body--MarginTop
1rem
.pf-c-empty-state.pf-m-xs--pf-c-empty-state__primary--MarginTop
1rem
.pf-c-empty-state.pf-m-xs--pf-c-empty-state__secondary--MarginTop
1rem
.pf-c-empty-state.pf-m-xs .pf-c-button--pf-c-button--FontSize
0.875rem
.pf-c-empty-state.pf-m-sm--pf-c-empty-state__content--MaxWidth
25rem
.pf-c-empty-state.pf-m-lg--pf-c-empty-state__content--MaxWidth
37.5rem
.pf-c-empty-state.pf-m-xl--pf-c-empty-state__body--MarginTop
1.5rem
.pf-c-empty-state.pf-m-xl--pf-c-empty-state__icon--MarginBottom
2rem
.pf-c-empty-state.pf-m-xl--pf-c-empty-state__icon--FontSize
6.25rem
.pf-c-empty-state.pf-m-xl--pf-c-empty-state--c-button__secondary--MarginTop
1rem

View source on GitHub