Design the non-happy statesDesign the non-happy states

One card, four states

Switch states; try Retry and the empty-state button.

export function InvoicesCard({ state, invoices, onRetry, onCreate }) {
  return (
    <Card>
      <CardHeader><CardTitle>Invoices</CardTitle></CardHeader>
      <CardContent className="min-h-[234px]">
        {state === "loading" && <InvoiceRowsSkeleton rows={5} />}
        {state === "error" && (
          <Alert variant="destructive">
            <AlertCircle className="h-4 w-4" />
            <AlertTitle>Couldn't load invoices</AlertTitle>
            <AlertDescription>The request timed out. Nothing was changed.</AlertDescription>
            <Button size="sm" variant="outline" onClick={onRetry}>Retry</Button>
          </Alert>
        )}
        {state === "empty" && (
          <div className="flex flex-col items-center gap-2 text-center">
            <FileText className="h-5 w-5 text-muted-foreground" />
            <p className="font-medium">No invoices yet</p>
            <p className="text-sm text-muted-foreground">Invoices you send appear here.</p>
            <Button size="sm" onClick={onCreate}>Create invoice</Button>
          </div>
        )}
        {state === "success" && <InvoiceTable rows={invoices} />}
      </CardContent>
    </Card>
  );
}

Slow network, stable layout

Send a request and watch the section below each card.

function InvoiceRowsSkeleton({ rows = 5 }) {
  return (
    <Table aria-busy="true">
      <InvoiceTableHeader />
      <TableBody>
        {Array.from({ length: rows }, (_, i) => (
          <TableRow key={i} className="h-10">
            <TableCell><Skeleton className="h-3.5 w-3/4" /></TableCell>
            <TableCell><Skeleton className="h-5 w-12 rounded-full" /></TableCell>
            <TableCell><Skeleton className="ml-auto h-3.5 w-16" /></TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}

Auth errors, inline

Type an email, then sign in on both sides.

<Card className="mx-auto w-full max-w-sm">
  <CardHeader>
    <CardTitle>Sign in</CardTitle>
    <CardDescription>Use your work email.</CardDescription>
  </CardHeader>
  <CardContent className="grid gap-4">
    <Button variant="outline">Continue with SSO</Button>
    <div className="flex items-center gap-2">
      <Separator className="flex-1" />
      <span className="text-xs text-muted-foreground">or</span>
      <Separator className="flex-1" />
    </div>
    {error && (
      <Alert variant="destructive">
        <AlertCircle className="h-4 w-4" />
        <AlertTitle>Wrong email or password</AlertTitle>
        <AlertDescription>Check both and try again.</AlertDescription>
      </Alert>
    )}
    <div className="grid gap-1.5">
      <Label htmlFor="email">Email</Label>
      <Input id="email" type="email" defaultValue={email} />
    </div>
    …
  </CardContent>
</Card>

Why it matters, pros and cons