Skip to content
MIZU.

ErrorState

A failure surface that names the problem and lets the user try again.

Live — this one is real

Usage

import { useState } from "react";
import { ErrorState } from "mizu-ui";

export function Example() {
  const [retried, setRetried] = useState(false);
  return retried ? (
    <p>Retry requested.</p>
  ) : (
    <ErrorState title="Could not load artwork" onRetry={() => setRetried(true)}>
      Check your connection and try again.
    </ErrorState>
  );
}

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.

Open full source ↗

Props

PropTypeDefaultDescription
titlestring—Specific problem heading.
onRetry() => void—Requests a retry; own the data state outside the component.

Accessibility

Error content is announced. Retry is a native button and does not clear unrelated content.

Motion

CSS transitions explain state changes. Reduced motion removes travel.

Works alongside

StatusAlertProgressMeter