Skip to content
Patternfly Logo

Empty state

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.

Spinner

Loading

No match found

No results found

No results match the filter criteria. Clear all filters and try again.

Props

EmptyState

*required
NameTypeDefaultDescription
childrenrequiredReact.ReactNodeContent rendered inside the EmptyState
classNamestring''Additional classes added to the EmptyState
isFullHeightbooleanCause component to consume the available height of its container
variant'xs' | 'small' | 'large' | 'xl' | 'full'EmptyStateVariant.fullModifies EmptyState max-width

EmptyStateBody

*required
NameTypeDefaultDescription
childrenReact.ReactNodeContent rendered inside the EmptyState
classNamestring''Additional classes added to the EmptyState

EmptyStateIcon

*required
NameTypeDefaultDescription
classNamestring''Additional classes added to the EmptyState
colorstringChanges the color of the icon.
componentReact.ComponentType<any>Component to be rendered inside the EmptyState on container variant
iconReact.ComponentType<any>Icon component to be rendered inside the EmptyState on icon variant Usually a CheckCircleIcon, ExclamationCircleIcon, LockIcon, PlusCircleIcon, RocketIcon SearchIcon, or WrenchIcon
variant'icon' | 'container''icon'Adds empty state icon variant styles

EmptyStateSecondaryActions

*required
NameTypeDefaultDescription
childrenReact.ReactNodenullContent rendered inside the EmptyState
classNamestring''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