EmptyState
A useful absence: explain what belongs here and give the next action.
Live — this one is real
No releases yet
Your first release starts with a finished piece.
Usage
import { EmptyState, Button } from "mizu-ui";
export function Example() {
return (
<EmptyState
title="No releases yet"
action={<Button size="sm">Create a release</Button>}
>
Your first release starts with a finished piece.
</EmptyState>
);
}
Source & setup
Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.
Inspect status/Feedback.tsx
Source is included in the npm package under src/status/Feedback.tsx.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | — | Empty-state heading. |
| children | ReactNode | — | Reason or instructions. |
| action / icon | ReactNode | — | Optional action and decorative illustration. |
Accessibility
A real heading and plain content; action retains its native semantics. Empty state does not steal focus.
Motion
CSS transitions explain state changes. Reduced motion removes travel.