Examples
Basic
Icon + title + body + primary action — the standard "first-time experience" pattern.
Empty state
Extra small
pf-m-xs — the most compact size; a single row of small link actions.
Empty state
Small
pf-m-sm — a compact empty state with a primary action and a row of links.
Empty state
Large
pf-m-lg — a roomier empty state for full-page use.
Empty state
Extra large
pf-m-xl — the largest size, for dedicated empty-state pages.
Empty state
Success
pf-m-success — a status empty state: a success icon and a confirming headline.
You're all set
With status
The Toggle status button cycles the empty state through success, danger, warning, info and custom status treatments.
You're all set
You're not set
You're probably not set
You might be set
You're custom
Spinner
A loading state — set customIcon=true and fill the
{#icon} slot with a Spinner instead of an icon. No
body or actions.
Loading
No match found
The classic "no search results" state — a search icon, a no-results headline, and a single
Clear all filters link action.
No results found
No icon
Omit iconName for a leaner look — best for "no results" states.
Nothing matches your search
With actions
Set hasActions=true and fill the {#actions} slot with
one or more pf-v6-c-empty-state__actions groups composing
Button components. (PF's default example uses two: a primary action, then a row of
links — see Basic.) The empty state doesn't hardcode buttons; you compose them.
Empty workspace
Documentation
Empty state props
Parameters accepted by
{#include components/feedback/empty-state ... /}. Model mode: pass
emptyState=<EmptyState> built in Java instead — the Java tab on each example
shows the builder.
| Name | Type | Description |
|---|---|---|
id
|
String | DOM id on the root; omit unless referenced. |
* titleText
|
String | Main headline. |
bodyText
|
String | Supporting paragraph. |
iconName
|
String (icon resolver) | Large illustrative icon at the top. |
customIcon + {#icon}
|
boolean + Slot |
Set customIcon=true and fill the {#icon} slot
to put a component in the icon area (e.g. a Spinner for a loading state)
instead of an icon. Overrides iconName.
|
size
|
xs | sm | lg | xl
|
Emits pf-m-{size} on the root.
|
status
|
danger | warning | success | info
|
Emits pf-m-{status}; colors the icon.
|
hasActions + {#actions}
|
boolean + Slot |
Set hasActions=true and fill the
{#actions} slot to render the footer. Provide one or more
pf-v6-c-empty-state__actions groups (PF's
EmptyStateActions), each composing
Button components. Omit both for an action-less empty state.
|
Usage
Always give them somewhere to go. An empty state without a primary action is a dead end. Even "no results" states should suggest a next step (clear filters, refine search).
Pair with Bullseye. Empty state inside a sized container + Bullseye = perfectly centered.