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 VariablesExamples
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
| 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-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 a x-large 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--Padding | 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__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-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-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 | ||
