Empty state

An empty state is a screen that is not yet populated with data or information—typically containing a short message and next steps for users.

Examples

Basic

Empty state

This represents an the empty state pattern in PatternFly. 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. The icon is optional.

Small

Empty state

This represents an the empty state pattern in PatternFly. 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. 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. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.

With status

You're all set

This represents an the empty state pattern in PatternFly. 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-v6-c-empty-state__icon
Hides icon for assistive technologies. Required

Usage

Class
Applied to
Outcome
.pf-v6-c-empty-state
<div>
Initiates an empty state component. The empty state centers its content (.pf-v6-c-empty-state__content) vertically and horizontally. Required
.pf-v6-c-empty-state__content
<div>
Creates the content container. Required
.pf-v6-c-empty-state__header
<div>
Creates the header container. Required
.pf-v6-c-empty-state__title
<div>
Creates the empty state title container. Required
.pf-v6-c-empty-state__title-text
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <div>
Creates the empty state title text container.
.pf-v6-c-empty-state__icon
<div>
Creates the empty state icon container.
.pf-v6-c-empty-state__body
<div>
Creates the empty state body content. There can be more than one .pf-v6-c-empty-state__body elements.
.pf-v6-c-empty-state__footer
<div>
Creates the footer container. Required
.pf-v6-c-empty-state__actions
<div>
Container for actions. Required
.pf-m-xs
.pf-v6-c-empty-state
Modifies the empty state for an extra small variation and max-width.
.pf-m-sm
.pf-v6-c-empty-state
Modifies the empty state for a small max-width.
.pf-m-lg
.pf-v6-c-empty-state
Modifies the empty state for a large max-width.
.pf-m-xl
.pf-v6-c-empty-state
Modifies the empty state for an extra large variation and max-width.
.pf-m-full-height
.pf-v6-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-v6-c-empty-state__content. Note: this modifier requires the parent of .pf-v6-c-empty-state have an implicit or explicit height defined.
.pf-m-danger
.pf-v6-c-empty-state
Modifies the empty state for danger status.
.pf-m-warning
.pf-v6-c-empty-state
Modifies the empty state for warning status.
.pf-m-success
.pf-v6-c-empty-state
Modifies the empty state for success status.
.pf-m-info
.pf-v6-c-empty-state
Modifies the empty state for info status.
.pf-m-custom
.pf-v6-c-empty-state
Modifies the empty state for custom status.

CSS variables

Expand or collapse columnSelectorVariableValue
:where(:root, .pf-v6-c-empty-state)--pf-v6-c-empty-state--PaddingBlockStart
2rem
:where(:root, .pf-v6-c-empty-state)--pf-v6-c-empty-state--PaddingInlineEnd
2rem
:where(:root, .pf-v6-c-empty-state)--pf-v6-c-empty-state--PaddingBlockEnd
2rem
:where(:root, .pf-v6-c-empty-state)--pf-v6-c-empty-state--PaddingInlineStart
2rem
:where(:root, .pf-v6-c-empty-state)--pf-v6-c-empty-state--m-xs--PaddingBlockStart
1rem
:where(:root, .pf-v6-c-empty-state)--pf-v6-c-empty-state--m-xs--PaddingInlineEnd
1rem
:where(:root, .pf-v6-c-empty-state)--pf-v6-c-empty-state--m-xs--PaddingBlockEnd
1rem
:where(:root, .pf-v6-c-empty-state)--pf-v6-c-empty-state--m-xs--PaddingInlineStart
1rem
:where(:root, .pf-v6-c-empty-state)--pf-v6-c-empty-state__content--MaxWidth
none
:where(:root, .pf-v6-c-empty-state)--pf-v6-c-empty-state--m-xs__content--MaxWidth
21.875rem
:where(:root, .pf-v6-c-empty-state)--pf-v6-c-empty-state--m-sm__content--MaxWidth
25rem
:where(:root, .pf-v6-c-empty-state)--pf-v6-c-empty-state--m-lg__content--MaxWidth
37.5rem
:where(:root, .pf-v6-c-empty-state)--pf-v6-c-empty-state__icon--MarginBlockEnd
1.5rem
:where(:root, .pf-v6-c-empty-state)--pf-v6-c-empty-state__icon--FontSize
3.5rem
:where(:root, .pf-v6-c-empty-state)--pf-v6-c-empty-state__icon--Color
(In light theme) #707070
:where(:root, .pf-v6-c-empty-state)--pf-v6-c-empty-state--m-xs__icon--MarginBlockEnd
1.5rem
:where(:root, .pf-v6-c-empty-state)--pf-v6-c-empty-state--m-xl__icon--MarginBlockEnd
2rem
:where(:root, .pf-v6-c-empty-state)--pf-v6-c-empty-state--m-xl__icon--FontSize
6rem
:where(:root, .pf-v6-c-empty-state)--pf-v6-c-empty-state--m-danger__icon--Color
(In light theme) #b1380b
:where(:root, .pf-v6-c-empty-state)--pf-v6-c-empty-state--m-warning__icon--Color
(In light theme) #dca614
:where(:root, .pf-v6-c-empty-state)--pf-v6-c-empty-state--m-success__icon--Color
(In light theme) #3d7317
:where(:root, .pf-v6-c-empty-state)--pf-v6-c-empty-state--m-info__icon--Color
(In light theme) #5e40be
:where(:root, .pf-v6-c-empty-state)--pf-v6-c-empty-state--m-custom__icon--Color
(In light theme) #147878
:where(:root, .pf-v6-c-empty-state)--pf-v6-c-empty-state__title-text--FontFamily
"Red Hat Display", "RedHatDisplay", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif
:where(:root, .pf-v6-c-empty-state)--pf-v6-c-empty-state__title-text--FontSize
1.25rem
:where(:root, .pf-v6-c-empty-state)--pf-v6-c-empty-state__title-text--FontWeight
700
:where(:root, .pf-v6-c-empty-state)--pf-v6-c-empty-state__title-text--LineHeight
1.3
:where(:root, .pf-v6-c-empty-state)--pf-v6-c-empty-state--m-xs__title-text--FontSize
1rem
:where(:root, .pf-v6-c-empty-state)--pf-v6-c-empty-state--m-xl__title-text--FontSize
2.25rem
:where(:root, .pf-v6-c-empty-state)--pf-v6-c-empty-state--m-xl__title-text--LineHeight
1.3
:where(:root, .pf-v6-c-empty-state)--pf-v6-c-empty-state__body--MarginBlockStart
1rem
:where(:root, .pf-v6-c-empty-state)--pf-v6-c-empty-state__body--Color
(In light theme) #4d4d4d
:where(:root, .pf-v6-c-empty-state)--pf-v6-c-empty-state--body--FontSize
1rem
:where(:root, .pf-v6-c-empty-state)--pf-v6-c-empty-state--m-xs__body--FontSize
1rem
:where(:root, .pf-v6-c-empty-state)--pf-v6-c-empty-state--m-xs__body--MarginBlockStart
1rem
:where(:root, .pf-v6-c-empty-state)--pf-v6-c-empty-state--m-xl__body--FontSize
1rem
:where(:root, .pf-v6-c-empty-state)--pf-v6-c-empty-state--m-xl__body--MarginBlockStart
2rem
:where(:root, .pf-v6-c-empty-state)--pf-v6-c-empty-state__footer--RowGap
1.5rem
:where(:root, .pf-v6-c-empty-state)--pf-v6-c-empty-state__footer--MarginBlockStart
2rem
:where(:root, .pf-v6-c-empty-state)--pf-v6-c-empty-state--m-xs__footer--MarginBlockStart
1rem
:where(:root, .pf-v6-c-empty-state)--pf-v6-c-empty-state__actions--RowGap
0.5rem
:where(:root, .pf-v6-c-empty-state)--pf-v6-c-empty-state__actions--ColumnGap
1rem
.pf-v6-c-empty-state.pf-m-xs--pf-v6-c-empty-state--PaddingBlockStart
1rem
.pf-v6-c-empty-state.pf-m-xs--pf-v6-c-empty-state--PaddingInlineEnd
1rem
.pf-v6-c-empty-state.pf-m-xs--pf-v6-c-empty-state--PaddingBlockEnd
1rem
.pf-v6-c-empty-state.pf-m-xs--pf-v6-c-empty-state--PaddingInlineStart
1rem
.pf-v6-c-empty-state.pf-m-xs--pf-v6-c-empty-state__title-text--FontSize
1rem
.pf-v6-c-empty-state.pf-m-xs--pf-v6-c-empty-state__content--MaxWidth
21.875rem
.pf-v6-c-empty-state.pf-m-xs--pf-v6-c-empty-state__icon--MarginBlockEnd
1.5rem
.pf-v6-c-empty-state.pf-m-xs--pf-v6-c-empty-state__body--MarginBlockStart
1rem
.pf-v6-c-empty-state.pf-m-xs--pf-v6-c-empty-state--body--FontSize
1rem
.pf-v6-c-empty-state.pf-m-xs--pf-v6-c-empty-state__footer--MarginBlockStart
1rem
.pf-v6-c-empty-state.pf-m-sm--pf-v6-c-empty-state__content--MaxWidth
25rem
.pf-v6-c-empty-state.pf-m-lg--pf-v6-c-empty-state__content--MaxWidth
37.5rem
.pf-v6-c-empty-state.pf-m-xl--pf-v6-c-empty-state__body--MarginBlockStart
2rem
.pf-v6-c-empty-state.pf-m-xl--pf-v6-c-empty-state--body--FontSize
1rem
.pf-v6-c-empty-state.pf-m-xl--pf-v6-c-empty-state__icon--MarginBlockEnd
2rem
.pf-v6-c-empty-state.pf-m-xl--pf-v6-c-empty-state__icon--FontSize
6rem
.pf-v6-c-empty-state.pf-m-xl--pf-v6-c-empty-state__title-text--FontSize
2.25rem
.pf-v6-c-empty-state.pf-m-xl--pf-v6-c-empty-state__title-text--LineHeight
1.3
.pf-v6-c-empty-state.pf-m-danger--pf-v6-c-empty-state__icon--Color
(In light theme) #b1380b
.pf-v6-c-empty-state.pf-m-warning--pf-v6-c-empty-state__icon--Color
(In light theme) #dca614
.pf-v6-c-empty-state.pf-m-success--pf-v6-c-empty-state__icon--Color
(In light theme) #3d7317
.pf-v6-c-empty-state.pf-m-info--pf-v6-c-empty-state__icon--Color
(In light theme) #5e40be
.pf-v6-c-empty-state.pf-m-custom--pf-v6-c-empty-state__icon--Color
(In light theme) #147878