Empty state

React component

Explain an empty view and offer a useful next step.

Try it out

Use the live controls or open the Code tab to view and copy the example.

No collections yet

Give related items a place to belong.

API reference

Generated from the package’s TypeScript exports. Standard React event and ARIA attributes are also accepted where the component wraps a native element.

Prop	Type	Description
`title`Required	`string`	Visible title and accessible name.
`children`	`ReactNode`	Content rendered inside the component.
`action`	`ReactNode`	See the typed definition and working example for this option.
`graphic`	`ReactNode`	See the typed definition and working example for this option.

Accessibility & interaction

Preserve semantic structure and communicate meaning with text rather than color alone.

Visible focus, reduced motion, and both color themes are shared across staqui. Choose labels and document structure that make sense in your application; automated checks do not replace assistive-technology testing.

Variants & implementation notes

React action and graphic props replace named slots. It never fabricates content or a successful network action.

Use the typed API above for the supported variants. The example demonstrates the primary composition; shared controls inherit hover, focus, active and disabled treatment where applicable.