Status
A quiet diamond and a readable state, never color alone.
Live — this one is real
Ready to publish
Usage
import { Status } from "mizu-ui";
export function Example() {
return <Status tone="success">Ready to publish</Status>;
}
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 |
|---|---|---|---|
| tone | "neutral" | "success" | "warning" | "error" | "neutral" | State color. |
| children | ReactNode | — | Readable status text. |
Accessibility
Status text carries the meaning; the decorative diamond is hidden. Add role=status only for live updates.
Motion
CSS transitions explain state changes. Reduced motion removes travel.