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 |
|---|---|---|---|
| titleTextrequired | React.ReactNode | Text of the title inside empty state header, will be wrapped in headingLevel | |
| 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 | |
| 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 |
|---|
View source on GitHub
