Empty

Empty fills a region that has nothing in it — no search results, an unstarted list, a cleared inbox — with a short title and an optional line of guidance. It explains the emptiness rather than leaving a blank space that reads as a bug.

Examples

Title and description

<Empty title="No results" description="Try adjusting your search or filters." />

Empty centres itself in the full height of its container, so give it a parent with a defined height.

With icon and action

<Empty
icon={<InboxIcon />}
title="No projects yet"
description="Projects you create or join show up here."
action={<Button>New Project</Button>}
/>

icon renders above the title in a tinted tile and is sized for you. action takes one control that gets the reader started; a Button passed there is styled as a small secondary button through context. Offer one action, not a menu of choices.

When to use

Use Empty when a region has no content to show yet — no results, an unstarted list, a cleared inbox — to say why and what to do next.

Use something else when:

• The content is still loading. Use Skeleton or Spinner.
• Something failed. Explain the problem and how to recover in a Banner above the region.

Usage

Props

Accessibility

Empty renders a plain div with its title and description as ordinary text, so they are read in document order. If it replaces content in response to a search or filter, give its container role="status" so the change is announced.