Placeholder for missing or filtered results with glyph, title, description, and optional action.
Also known as: no results, blank state, zero state
Install with the CLI, or copy the component source into your project.
Add empty-state (npm)
1npx --yes -p @default-file/ui df-ui add empty-state
Glyph, title, and supporting description.
Optional recovery control under the copy.
announce sets a status role so assistive technology hears the empty state after a filter returns nothing.
Pass any node as glyph. The glyph slot is hidden from assistive technology.
Title is required. Glyph and description are optional.
Placeholder for missing data or empty filtered results. Compose a glyph, title, optional description, and optional action.
| Prop | Type | Default | Notes |
|---|---|---|---|
| glyph | ReactNode | - | Decorative mark above the copy. Hidden from assistive tech. |
| title | ReactNode | - | Primary empty-state heading (required). |
| description | ReactNode | - | Supporting explanation under the title. |
| action | ReactNode | - | Optional recovery control under the copy. |
| announce | boolean | false | When true, sets role="status" so assistive technology announces the empty state as it appears. Keep false for a static empty illustration that is part of the initial page. |
| className | string | - | Additional styles on the root. |