EmptyState
A quiet feedback surface for empty collections, filtered results, and first-run states.
import {
EmptyState,
EmptyStateContent,
EmptyStateIcon,
EmptyStateTitle,
} from "raft-ui";
<EmptyState>
<EmptyStateContent>
<EmptyStateIcon />
<EmptyStateTitle />
</EmptyStateContent>
</EmptyState>renderReactElement | (props, state) => ReactElement
Change the root element, for example to section with an aria-labelledby hook.
...propsHTMLAttributes<HTMLDivElement>
Native div attributes plus className.
| Prop | Type | Default | Description |
|---|---|---|---|
render | ReactElement | (props, state) => ReactElement | — | Change the root element, for example to section with an aria-labelledby hook. |
...props | HTMLAttributes<HTMLDivElement> | — | Native div attributes plus className. |
...propsHTMLAttributes<HTMLDivElement>
Recommended wrapper for icon, title, and description. Keeps copy centered, bounded, and balanced.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | HTMLAttributes<HTMLDivElement> | — | Recommended wrapper for icon, title, and description. Keeps copy centered, bounded, and balanced. |
...propsHTMLAttributes<HTMLDivElement>
Muted icon slot. The slot owns default SVG sizing; override with className for custom media.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | HTMLAttributes<HTMLDivElement> | — | Muted icon slot. The slot owns default SVG sizing; override with className for custom media. |
...propsHTMLAttributes<HTMLDivElement>
Muted sentence-case title. Use render to promote it to a real heading.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | HTMLAttributes<HTMLDivElement> | — | Muted sentence-case title. Use render to promote it to a real heading. |
...propsHTMLAttributes<HTMLDivElement>
Optional supporting copy with a readable measure.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | HTMLAttributes<HTMLDivElement> | — | Optional supporting copy with a readable measure. |
...propsHTMLAttributes<HTMLDivElement>
Optional action row. Add flex and gap classes when rendering more than one action.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | HTMLAttributes<HTMLDivElement> | — | Optional action row. Add flex and gap classes when rendering more than one action. |