Patternfly Logo

Examples

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.

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

Spinner

Loading

No match found

No results found

No results match the filter criteria. Remove all filters or clear all filters to show results.

Props

EmptyState properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeYesContent rendered inside the EmptyState
classNamestringNo''Additional classes added to the EmptyState
isFullHeightbooleanNoCause component to consume the available height of its container
variant'small' | 'large' | 'xl' | 'full'NoEmptyStateVariant.fullModifies EmptyState max-width
EmptyStateBody properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNoContent rendered inside the EmptyState
classNamestringNo''Additional classes added to the EmptyState
EmptyStateIcon properties
NameTypeRequiredDefaultDescription
classNamestringNo''Additional classes added to the EmptyState
colorstringNoChanges the color of the icon.
componentReact.ComponentType<any>NoComponent to be rendered inside the EmptyState on container variant
iconReact.ComponentType<any>NoIcon component to be rendered inside the EmptyState on icon variant Usually a CheckCircleIcon, ExclamationCircleIcon, LockIcon, PlusCircleIcon, RocketIcon SearchIcon, or WrenchIcon
variant'icon' | 'container'No'icon'Adds empty state icon variant styles
EmptyStateSecondaryActions properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullContent rendered inside the EmptyState
classNamestringNo''Additional classes added to the EmptyState

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