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
ExamplesPropsCSS VariablesExamples
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.
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.
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| className | string | No | '' | Additional classes added to the EmptyState |
| children | React.ReactNode | Yes | Content rendered inside the EmptyState | |
| variant | 'small' | 'large' | 'xl' | 'full' | No | EmptyStateVariant.full | Modifies EmptyState max-width |
| isFullHeight | boolean | No | Cause component to consume the available height of its container |
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| children | React.ReactNode | No | Content rendered inside the EmptyState | |
| className | string | No | '' | Additional classes added to the EmptyState |
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| className | string | No | '' | Additional classes added to the EmptyState |
| icon | React.ComponentType<any> | No | Icon component to be rendered inside the EmptyState on icon variant Usually a CheckCircleIcon, ExclamationCircleIcon, LockIcon, PlusCircleIcon, RocketIcon SearchIcon, or WrenchIcon | |
| component | React.ComponentType<any> | No | Component to be rendered inside the EmptyState on container variant | |
| variant | 'icon' | 'container' | No | 'icon' | Adds empty state icon variant styles |
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| children | React.ReactNode | No | null | Content rendered inside the EmptyState |
| className | string | No | '' | Additional classes added to the EmptyState |
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 | ||
