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 an the empty state pattern in PatternFly. The icon is optional.
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.
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.
No match found
No results found
No results match the filter criteria. Clear all filters and try again.
Props
EmptyState
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Content rendered inside the empty state | |
| className | string | Additional classes added to the empty state | |
| headerClassName | string | Additional class names to apply to the empty state header | |
| headingLevel | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | The heading level to use, default is h1 | |
| icon | React.ComponentType<any> | Empty state icon element to be rendered. Can also be a spinner component | |
| isFullHeight | boolean | Cause component to consume the available height of its container | |
| status | 'danger' | 'warning' | 'success' | 'info' | 'custom' | Status of the empty state, will set a default status icon and color. Icon can be overwritten using the icon prop | |
| 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 | |
| variant | 'xs' | 'sm' | 'lg' | 'xl' | 'full' | EmptyStateVariant.full | Modifies empty state max-width and sizes of icon, title and body |
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-v6-c-empty-state | --pf-v6-c-empty-state--PaddingBlockStart | 2rem | ||
| ||||
| .pf-v6-c-empty-state | --pf-v6-c-empty-state--PaddingInlineEnd | 2rem | ||
| ||||
| .pf-v6-c-empty-state | --pf-v6-c-empty-state--PaddingBlockEnd | 2rem | ||
| ||||
| .pf-v6-c-empty-state | --pf-v6-c-empty-state--PaddingInlineStart | 2rem | ||
| ||||
| .pf-v6-c-empty-state | --pf-v6-c-empty-state--m-xs--PaddingBlockStart | 1rem | ||
| ||||
| .pf-v6-c-empty-state | --pf-v6-c-empty-state--m-xs--PaddingInlineEnd | 1rem | ||
| ||||
| .pf-v6-c-empty-state | --pf-v6-c-empty-state--m-xs--PaddingBlockEnd | 1rem | ||
| ||||
| .pf-v6-c-empty-state | --pf-v6-c-empty-state--m-xs--PaddingInlineStart | 1rem | ||
| ||||
| .pf-v6-c-empty-state | --pf-v6-c-empty-state__content--MaxWidth | none | ||
| .pf-v6-c-empty-state | --pf-v6-c-empty-state--m-xs__content--MaxWidth | 21.875rem | ||
| .pf-v6-c-empty-state | --pf-v6-c-empty-state--m-sm__content--MaxWidth | 25rem | ||
| .pf-v6-c-empty-state | --pf-v6-c-empty-state--m-lg__content--MaxWidth | 37.5rem | ||
| .pf-v6-c-empty-state | --pf-v6-c-empty-state__icon--MarginBlockEnd | 1.5rem | ||
| ||||
| .pf-v6-c-empty-state | --pf-v6-c-empty-state__icon--FontSize | 3.5rem | ||
| ||||
| .pf-v6-c-empty-state | --pf-v6-c-empty-state__icon--Color | (In light theme) #707070 | ||
| ||||
| .pf-v6-c-empty-state | --pf-v6-c-empty-state--m-xs__icon--MarginBlockEnd | 1.5rem | ||
| ||||
| .pf-v6-c-empty-state | --pf-v6-c-empty-state--m-xl__icon--MarginBlockEnd | 2rem | ||
| ||||
| .pf-v6-c-empty-state | --pf-v6-c-empty-state--m-xl__icon--FontSize | 6rem | ||
| ||||
| .pf-v6-c-empty-state | --pf-v6-c-empty-state--m-danger__icon--Color | (In light theme) #b1380b | ||
| ||||
| .pf-v6-c-empty-state | --pf-v6-c-empty-state--m-warning__icon--Color | (In light theme) #dca614 | ||
| ||||
| .pf-v6-c-empty-state | --pf-v6-c-empty-state--m-success__icon--Color | (In light theme) #3d7317 | ||
| ||||
| .pf-v6-c-empty-state | --pf-v6-c-empty-state--m-info__icon--Color | (In light theme) #5e40be | ||
| ||||
| .pf-v6-c-empty-state | --pf-v6-c-empty-state--m-custom__icon--Color | (In light theme) #147878 | ||
| ||||
| .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 | ||
| ||||
| .pf-v6-c-empty-state | --pf-v6-c-empty-state__title-text--FontSize | 1.25rem | ||
| ||||
| .pf-v6-c-empty-state | --pf-v6-c-empty-state__title-text--FontWeight | 500 | ||
| ||||
| .pf-v6-c-empty-state | --pf-v6-c-empty-state__title-text--LineHeight | 1.3 | ||
| ||||
| .pf-v6-c-empty-state | --pf-v6-c-empty-state--m-xs__title-text--FontSize | 1rem | ||
| ||||
| .pf-v6-c-empty-state | --pf-v6-c-empty-state--m-xl__title-text--FontSize | 2.25rem | ||
| ||||
| .pf-v6-c-empty-state | --pf-v6-c-empty-state--m-xl__title-text--LineHeight | 1.3 | ||
| ||||
| .pf-v6-c-empty-state | --pf-v6-c-empty-state__body--MarginBlockStart | 1rem | ||
| ||||
| .pf-v6-c-empty-state | --pf-v6-c-empty-state__body--Color | (In light theme) #4d4d4d | ||
| ||||
| .pf-v6-c-empty-state | --pf-v6-c-empty-state--body--FontSize | 1rem | ||
| ||||
| .pf-v6-c-empty-state | --pf-v6-c-empty-state--m-xs__body--FontSize | 1rem | ||
| ||||
| .pf-v6-c-empty-state | --pf-v6-c-empty-state--m-xs__body--MarginBlockStart | 1rem | ||
| ||||
| .pf-v6-c-empty-state | --pf-v6-c-empty-state--m-xl__body--FontSize | 1rem | ||
| ||||
| .pf-v6-c-empty-state | --pf-v6-c-empty-state--m-xl__body--MarginBlockStart | 2rem | ||
| ||||
| .pf-v6-c-empty-state | --pf-v6-c-empty-state__footer--RowGap | 1.5rem | ||
| ||||
| .pf-v6-c-empty-state | --pf-v6-c-empty-state__footer--MarginBlockStart | 2rem | ||
| ||||
| .pf-v6-c-empty-state | --pf-v6-c-empty-state--m-xs__footer--MarginBlockStart | 1rem | ||
| ||||
| .pf-v6-c-empty-state | --pf-v6-c-empty-state__actions--RowGap | 0.5rem | ||
| ||||
| .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 | ||
| ||||
