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 github:itsvigneshv/default-file-ui#main df-ui add empty-state
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. |