ErrorOverlay

PreviousNext

Inline error with retry affordance.

import { ErrorOverlay, Button } from "@/rl-ui";

<div className="relative min-h-[160px] w-full">
<ErrorOverlay title="Couldn't load" message="Try again.">
  <Button variant="secondary">Retry</Button>
</ErrorOverlay>
</div>

Examples

Title + message (default EmptyState)

Omit children to render the built-in empty/error layout from title and message.

import { ErrorOverlay } from "@/rl-ui";

<div className="relative min-h-[160px] w-full border">
<ErrorOverlay
  title="Couldn't load projects"
  message="Check your connection and try again."
/>
</div>

With action slot

import { ErrorOverlay, Button } from "@/rl-ui";

<div className="relative min-h-[160px] w-full">
<ErrorOverlay
  title="Sync failed"
  message="We couldn't refresh this board."
  action={<Button variant="primary" size="small">Retry sync</Button>}
/>
</div>

Custom children

import { ErrorOverlay, Button, Text, Space } from "@/rl-ui";

<div className="relative min-h-[160px] w-full">
<ErrorOverlay>
  <Space direction="vertical" size="medium" align="center">
    <Text variant="heading-03">Something went wrong</Text>
    <Text variant="body-short-01">Please reload this panel.</Text>
    <Button variant="secondary" size="small">Reload</Button>
  </Space>
</ErrorOverlay>
</div>

API

PropTypeDefaultDescription
titleReactNode—Error title (used when children omitted).
messageReactNode—Error details (used when children omitted).
actionReactNode—Primary action passed to the default EmptyState.
imageReactNode—Optional illustration for the default EmptyState.
classNamestring—Classes on the absolute overlay root.
childrenReactNode—Custom overlay body (replaces title/message EmptyState).