Examples
Basic
Empty state
This represents 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 the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.
Small
Empty state
This represents 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 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 the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.
No match found
No results found
No results match the filter criteria. Clear all filters and try again.
Custom icon color
Custom icon color
This represents the empty state pattern in PatternFly with a custom icon color. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.
Props
EmptyState
| Name | Type | Default | Description |
|---|---|---|---|
| childrenrequired | React.ReactNode | Content rendered inside the empty state | |
| className | string | Additional classes added to the empty state | |
| isFullHeight | boolean | Cause component to consume the available height of its container | |
| variant | 'xs' | 'sm' | 'lg' | 'xl' | 'full' | EmptyStateVariant.full | Modifies empty state max-width and sizes of icon, title and body |
EmptyStateHeader
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Content rendered inside the empty state header, either in addition to or instead of the titleText prop | |
| className | string | Additional classes added to the empty state header | |
| headingLevel | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'h1' | The heading level to use, default is h1 |
| icon | React.ReactElement<EmptyStateIconProps> | Empty state icon element to be rendered | |
| titleClassName | string | Additional classes added to the title inside empty state header | |
| titleText | React.ReactNode | Text of the title inside empty state header, will be wrapped in headingLevel |
EmptyStateIcon
| Name | Type | Default | Description |
|---|---|---|---|
| iconrequired | React.ComponentType<any> | Icon component to be rendered. Can also be a spinner component | |
| className | string | Additional classes added to the empty state icon | |
| color | string | Changes the color of the icon. |
EmptyStateBody
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Content rendered inside the empty state body | |
| className | string | Additional classes added to the empty state body |
EmptyStateFooter
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Content rendered inside the empty state footer | |
| className | string | Additional classes added to the empty state footer |
EmptyStateActions
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Content rendered inside the empty state actions | |
| className | string | Additional classes added to the empty state actions |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| .pf-v5-c-empty-state | --pf-v5-c-empty-state--PaddingTop | 2rem | ||
--pf-v5-c-empty-state--PaddingTop --pf-v5-global--spacer--xl $pf-v5-global--spacer--xl pf-size-prem(32px) 2rem | ||||
| .pf-v5-c-empty-state | --pf-v5-c-empty-state--PaddingRight | 2rem | ||
--pf-v5-c-empty-state--PaddingRight --pf-v5-global--spacer--xl $pf-v5-global--spacer--xl pf-size-prem(32px) 2rem | ||||
| .pf-v5-c-empty-state | --pf-v5-c-empty-state--PaddingBottom | 2rem | ||
--pf-v5-c-empty-state--PaddingBottom --pf-v5-global--spacer--xl $pf-v5-global--spacer--xl pf-size-prem(32px) 2rem | ||||
| .pf-v5-c-empty-state | --pf-v5-c-empty-state--PaddingLeft | 2rem | ||
--pf-v5-c-empty-state--PaddingLeft --pf-v5-global--spacer--xl $pf-v5-global--spacer--xl pf-size-prem(32px) 2rem | ||||
| .pf-v5-c-empty-state | --pf-v5-c-empty-state--m-xs--PaddingTop | 1rem | ||
--pf-v5-c-empty-state--m-xs--PaddingTop --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-empty-state | --pf-v5-c-empty-state--m-xs--PaddingRight | 1rem | ||
--pf-v5-c-empty-state--m-xs--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-empty-state | --pf-v5-c-empty-state--m-xs--PaddingBottom | 1rem | ||
--pf-v5-c-empty-state--m-xs--PaddingBottom --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-empty-state | --pf-v5-c-empty-state--m-xs--PaddingLeft | 1rem | ||
--pf-v5-c-empty-state--m-xs--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-empty-state | --pf-v5-c-empty-state__content--MaxWidth | none | ||
| .pf-v5-c-empty-state | --pf-v5-c-empty-state--m-xs__content--MaxWidth | 21.875rem | ||
| .pf-v5-c-empty-state | --pf-v5-c-empty-state--m-sm__content--MaxWidth | 25rem | ||
| .pf-v5-c-empty-state | --pf-v5-c-empty-state--m-lg__content--MaxWidth | 37.5rem | ||
| .pf-v5-c-empty-state | --pf-v5-c-empty-state__icon--MarginBottom | 1.5rem | ||
--pf-v5-c-empty-state__icon--MarginBottom --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
| .pf-v5-c-empty-state | --pf-v5-c-empty-state__icon--FontSize | 3.375rem | ||
--pf-v5-c-empty-state__icon--FontSize --pf-v5-global--icon--FontSize--xl $pf-v5-global--icon--FontSize--xl pf-font-prem(54px) 3.375rem | ||||
| .pf-v5-c-empty-state | --pf-v5-c-empty-state__icon--Color | #6a6e73 | ||
--pf-v5-c-empty-state__icon--Color --pf-v5-global--icon--Color--light $pf-v5-global--icon--Color--light $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-empty-state | --pf-v5-c-empty-state--m-xs__icon--MarginBottom | 1rem | ||
--pf-v5-c-empty-state--m-xs__icon--MarginBottom --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-empty-state | --pf-v5-c-empty-state--m-xl__icon--MarginBottom | 2rem | ||
--pf-v5-c-empty-state--m-xl__icon--MarginBottom --pf-v5-global--spacer--xl $pf-v5-global--spacer--xl pf-size-prem(32px) 2rem | ||||
| .pf-v5-c-empty-state | --pf-v5-c-empty-state--m-xl__icon--FontSize | 6.25rem | ||
| .pf-v5-c-empty-state | --pf-v5-c-empty-state__title-text--FontFamily | '"RedHatDisplay", helvetica, arial, sans-serif' | ||
--pf-v5-c-empty-state__title-text--FontFamily --pf-v5-global--FontFamily--heading $pf-v5-global--FontFamily--heading '"RedHatDisplay", helvetica, arial, sans-serif' | ||||
| .pf-v5-c-empty-state | --pf-v5-c-empty-state__title-text--FontSize | 1.25rem | ||
--pf-v5-c-empty-state__title-text--FontSize --pf-v5-global--FontSize--xl $pf-v5-global--FontSize--xl pf-font-prem(20px) 1.25rem | ||||
| .pf-v5-c-empty-state | --pf-v5-c-empty-state__title-text--FontWeight | 400 | ||
--pf-v5-c-empty-state__title-text--FontWeight --pf-v5-global--FontWeight--normal $pf-v5-global--FontWeight--normal 400 | ||||
| .pf-v5-c-empty-state | --pf-v5-c-empty-state__title-text--LineHeight | 1.5 | ||
--pf-v5-c-empty-state__title-text--LineHeight --pf-v5-global--LineHeight--md $pf-v5-global--LineHeight--md 1.5 | ||||
| .pf-v5-c-empty-state | --pf-v5-c-empty-state--m-xs__title-text--FontSize | 1rem | ||
--pf-v5-c-empty-state--m-xs__title-text--FontSize --pf-v5-global--FontSize--md $pf-v5-global--FontSize--md pf-font-prem(16px) 1rem | ||||
| .pf-v5-c-empty-state | --pf-v5-c-empty-state--m-xl__title-text--FontSize | 2.25rem | ||
--pf-v5-c-empty-state--m-xl__title-text--FontSize --pf-v5-global--FontSize--4xl $pf-v5-global--FontSize--4xl pf-font-prem(36px) 2.25rem | ||||
| .pf-v5-c-empty-state | --pf-v5-c-empty-state--m-xl__title-text--LineHeight | 1.3 | ||
--pf-v5-c-empty-state--m-xl__title-text--LineHeight --pf-v5-global--LineHeight--sm $pf-v5-global--LineHeight--sm 1.3 | ||||
| .pf-v5-c-empty-state | --pf-v5-c-empty-state__body--MarginTop | 1rem | ||
--pf-v5-c-empty-state__body--MarginTop --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-empty-state | --pf-v5-c-empty-state__body--Color | #6a6e73 | ||
--pf-v5-c-empty-state__body--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-empty-state | --pf-v5-c-empty-state--body--FontSize | 1rem | ||
--pf-v5-c-empty-state--body--FontSize --pf-v5-global--FontSize--md $pf-v5-global--FontSize--md pf-font-prem(16px) 1rem | ||||
| .pf-v5-c-empty-state | --pf-v5-c-empty-state--m-xs__body--FontSize | 0.875rem | ||
--pf-v5-c-empty-state--m-xs__body--FontSize --pf-v5-global--FontSize--sm $pf-v5-global--FontSize--sm pf-font-prem(14px) 0.875rem | ||||
| .pf-v5-c-empty-state | --pf-v5-c-empty-state--m-xs__body--MarginTop | 1rem | ||
--pf-v5-c-empty-state--m-xs__body--MarginTop --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-empty-state | --pf-v5-c-empty-state--m-xl__body--FontSize | 1.25rem | ||
--pf-v5-c-empty-state--m-xl__body--FontSize --pf-v5-global--FontSize--xl $pf-v5-global--FontSize--xl pf-font-prem(20px) 1.25rem | ||||
| .pf-v5-c-empty-state | --pf-v5-c-empty-state--m-xl__body--MarginTop | 1.5rem | ||
--pf-v5-c-empty-state--m-xl__body--MarginTop --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
| .pf-v5-c-empty-state | --pf-v5-c-empty-state__footer--RowGap | 0.5rem | ||
--pf-v5-c-empty-state__footer--RowGap --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-empty-state | --pf-v5-c-empty-state__footer--MarginTop | 2rem | ||
--pf-v5-c-empty-state__footer--MarginTop --pf-v5-global--spacer--xl $pf-v5-global--spacer--xl pf-size-prem(32px) 2rem | ||||
| .pf-v5-c-empty-state | --pf-v5-c-empty-state--m-xs__footer--MarginTop | 1rem | ||
--pf-v5-c-empty-state--m-xs__footer--MarginTop --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-empty-state | --pf-v5-c-empty-state__actions--RowGap | 0.25rem | ||
--pf-v5-c-empty-state__actions--RowGap --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
| .pf-v5-c-empty-state | --pf-v5-c-empty-state__actions--ColumnGap | 0.25rem | ||
--pf-v5-c-empty-state__actions--ColumnGap --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
| .pf-v5-c-empty-state.pf-m-xs | --pf-v5-c-empty-state--PaddingTop | 1rem | ||
--pf-v5-c-empty-state--PaddingTop --pf-v5-c-empty-state--m-xs--PaddingTop --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-empty-state.pf-m-xs | --pf-v5-c-empty-state--PaddingRight | 1rem | ||
--pf-v5-c-empty-state--PaddingRight --pf-v5-c-empty-state--m-xs--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-empty-state.pf-m-xs | --pf-v5-c-empty-state--PaddingBottom | 1rem | ||
--pf-v5-c-empty-state--PaddingBottom --pf-v5-c-empty-state--m-xs--PaddingBottom --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-empty-state.pf-m-xs | --pf-v5-c-empty-state--PaddingLeft | 1rem | ||
--pf-v5-c-empty-state--PaddingLeft --pf-v5-c-empty-state--m-xs--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-empty-state.pf-m-xs | --pf-v5-c-empty-state__title-text--FontSize | 1rem | ||
--pf-v5-c-empty-state__title-text--FontSize --pf-v5-c-empty-state--m-xs__title-text--FontSize --pf-v5-global--FontSize--md $pf-v5-global--FontSize--md pf-font-prem(16px) 1rem | ||||
| .pf-v5-c-empty-state.pf-m-xs | --pf-v5-c-empty-state__content--MaxWidth | 21.875rem | ||
--pf-v5-c-empty-state__content--MaxWidth --pf-v5-c-empty-state--m-xs__content--MaxWidth 21.875rem | ||||
| .pf-v5-c-empty-state.pf-m-xs | --pf-v5-c-empty-state__icon--MarginBottom | 1rem | ||
--pf-v5-c-empty-state__icon--MarginBottom --pf-v5-c-empty-state--m-xs__icon--MarginBottom --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-empty-state.pf-m-xs | --pf-v5-c-empty-state__body--MarginTop | 1rem | ||
--pf-v5-c-empty-state__body--MarginTop --pf-v5-c-empty-state--m-xs__body--MarginTop --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-empty-state.pf-m-xs | --pf-v5-c-empty-state--body--FontSize | 0.875rem | ||
--pf-v5-c-empty-state--body--FontSize --pf-v5-c-empty-state--m-xs__body--FontSize --pf-v5-global--FontSize--sm $pf-v5-global--FontSize--sm pf-font-prem(14px) 0.875rem | ||||
| .pf-v5-c-empty-state.pf-m-xs | --pf-v5-c-empty-state__footer--MarginTop | 1rem | ||
--pf-v5-c-empty-state__footer--MarginTop --pf-v5-c-empty-state--m-xs__footer--MarginTop --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-empty-state.pf-m-sm | --pf-v5-c-empty-state__content--MaxWidth | 25rem | ||
--pf-v5-c-empty-state__content--MaxWidth --pf-v5-c-empty-state--m-sm__content--MaxWidth 25rem | ||||
| .pf-v5-c-empty-state.pf-m-lg | --pf-v5-c-empty-state__content--MaxWidth | 37.5rem | ||
--pf-v5-c-empty-state__content--MaxWidth --pf-v5-c-empty-state--m-lg__content--MaxWidth 37.5rem | ||||
| .pf-v5-c-empty-state.pf-m-xl | --pf-v5-c-empty-state__body--MarginTop | 1.5rem | ||
--pf-v5-c-empty-state__body--MarginTop --pf-v5-c-empty-state--m-xl__body--MarginTop --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
| .pf-v5-c-empty-state.pf-m-xl | --pf-v5-c-empty-state--body--FontSize | 1.25rem | ||
--pf-v5-c-empty-state--body--FontSize --pf-v5-c-empty-state--m-xl__body--FontSize --pf-v5-global--FontSize--xl $pf-v5-global--FontSize--xl pf-font-prem(20px) 1.25rem | ||||
| .pf-v5-c-empty-state.pf-m-xl | --pf-v5-c-empty-state__icon--MarginBottom | 2rem | ||
--pf-v5-c-empty-state__icon--MarginBottom --pf-v5-c-empty-state--m-xl__icon--MarginBottom --pf-v5-global--spacer--xl $pf-v5-global--spacer--xl pf-size-prem(32px) 2rem | ||||
| .pf-v5-c-empty-state.pf-m-xl | --pf-v5-c-empty-state__icon--FontSize | 6.25rem | ||
--pf-v5-c-empty-state__icon--FontSize --pf-v5-c-empty-state--m-xl__icon--FontSize 6.25rem | ||||
| .pf-v5-c-empty-state.pf-m-xl | --pf-v5-c-empty-state__title-text--FontSize | 2.25rem | ||
--pf-v5-c-empty-state__title-text--FontSize --pf-v5-c-empty-state--m-xl__title-text--FontSize --pf-v5-global--FontSize--4xl $pf-v5-global--FontSize--4xl pf-font-prem(36px) 2.25rem | ||||
| .pf-v5-c-empty-state.pf-m-xl | --pf-v5-c-empty-state__title-text--LineHeight | 1.3 | ||
--pf-v5-c-empty-state__title-text--LineHeight --pf-v5-c-empty-state--m-xl__title-text--LineHeight --pf-v5-global--LineHeight--sm $pf-v5-global--LineHeight--sm 1.3 | ||||
View source on GitHub
