ErrorState

The failure state.

Shown when a load or an action failed. It carries role="alert" and is framed in the destructive colours.

export const client = "only";

import { ErrorState, Button } from "@squadbase/vantage/ui";

export default function Example() {
  return (
    <div className="w-[28rem]">
      <ErrorState
        title="売上を読み込めませんでした"
        message="upstream timeout after 30s"
        action={<Button variant="outline">再試行</Button>}
      />
    </div>
  );
}

import { ErrorState } from "@squadbase/vantage/ui";

All three states together

The usual shape is to map the query’s state onto the three branches.

import { useQuery, apiFetch } from "@squadbase/vantage/query";
import { Button, Loading, Empty, ErrorState } from "@squadbase/vantage/ui";
import { DataTablePreset } from "@squadbase/vantage/components";

export default function Customers() {
  const { data, isLoading, error, refetch } = useQuery({
    queryKey: ["customers"],
    queryFn: () => apiFetch("/api/customers").then((r) => r.json()),
  });

  if (isLoading) return <Loading label="Loading customers…" />;
  if (error)
    return (
      <ErrorState
        message={error.message}
        action={<Button variant="outline" onClick={() => refetch()}>Retry</Button>}
      />
    );
  if (data.length === 0) return <Empty title="No customers yet" />;

  return <DataTablePreset columns={columns} data={data} />;
}