Empty

No notifications

You're all caught up — new activity will appear here.

<Empty>  <EmptyHeader>    <EmptyMedia variant="icon">      <Tray />    </EmptyMedia>    <EmptyTitle>No notifications</EmptyTitle>    <EmptyDescription>      You're all caught up — new activity will appear here.    </EmptyDescription>  </EmptyHeader>  <EmptyContent>    <Button size="sm">Refresh</Button>  </EmptyContent></Empty>

Usage

import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@reva/ui";

Composition

Use the following composition to build an Empty:

Empty
├── EmptyHeader
│   ├── EmptyMedia
│   ├── EmptyTitle
│   └── EmptyDescription
└── EmptyContent

Examples

Empty list

No items yet

Add your first item to get started.

<Empty>  <EmptyHeader>    <EmptyMedia variant="icon">      <ListDashes />    </EmptyMedia>    <EmptyTitle>No items yet</EmptyTitle>    <EmptyDescription>      Add your first item to get started.    </EmptyDescription>  </EmptyHeader></Empty>

Empty search

No results found

Try a different keyword or clear the filters.

<Empty>  <EmptyHeader>    <EmptyMedia variant="icon">      <MagnifyingGlass />    </EmptyMedia>    <EmptyTitle>No results found</EmptyTitle>    <EmptyDescription>      Try a different keyword or clear the filters.    </EmptyDescription>  </EmptyHeader></Empty>

Empty inbox

Inbox zero

Nothing waiting for you right now.

<Empty>  <EmptyHeader>    <EmptyMedia variant="icon">      <Tray />    </EmptyMedia>    <EmptyTitle>Inbox zero</EmptyTitle>    <EmptyDescription>      Nothing waiting for you right now.    </EmptyDescription>  </EmptyHeader></Empty>

With action button

No projects

Create your first project to start collaborating.

<Empty>  <EmptyHeader>    <EmptyMedia variant="icon">      <ListDashes />    </EmptyMedia>    <EmptyTitle>No projects</EmptyTitle>    <EmptyDescription>      Create your first project to start collaborating.    </EmptyDescription>  </EmptyHeader>  <EmptyContent>    <Button size="sm">      <Plus data-icon="inline-start" />      New project    </Button>  </EmptyContent></Empty>

Props

Empty and its parts forward all native div props. Style with className overrides as needed.

Export	Role
`Empty`	Outer container — centers the placeholder vertically and horizontally.
`EmptyHeader`	Stacks `EmptyMedia`, `EmptyTitle`, and `EmptyDescription`.
`EmptyMedia`	Slot for an icon or illustration. Accepts `variant="default" \| "icon"` (default `"default"`); the `icon` variant renders a muted rounded square.
`EmptyTitle`	Heading for the placeholder.
`EmptyDescription`	Supporting copy below the title.
`EmptyContent`	Slot for actions or follow-up controls (e.g. a `Button`).

Empty

On this page