Empty

import { FolderOpen } from "lucide-react"

import { Button } from "@hel/ui/button"

When to use it#

Use Empty wherever a list, a table or a page can have nothing in it: a new account with no data, a search with no results, a folder with no files. An empty screen is a chance to say why it is empty and what to do next, so use one instead of leaving a blank space.

Say what is missing, and give the one action that fixes it. "No invoices yet" with a "New invoice" button helps. "No data" does not. If the screen is empty because something failed, use an Error State instead. Async Content picks between the two for you.

Import#

Copyimport {
  Empty,
  EmptyMedia,
  EmptyHeader,
  EmptyTitle,
  EmptyDescription,
  EmptyActions,
} from "@hel/ui/empty"

Anatomy#

Empty centers its parts in a column. Every part is optional, so use as many as the place needs.

• EmptyMedia is the icon in a small tile. Pass an icon, or your own element as its children.
• EmptyHeader groups the title and the description.
• EmptyTitle and EmptyDescription are the text. A line break in the description, written as \n, is kept.
• EmptyActions holds the buttons.

Copy<Empty>
  <EmptyMedia icon={FolderOpen} />
  <EmptyHeader>
    <EmptyTitle>No invoices yet</EmptyTitle>
    <EmptyDescription>Invoices you send will show up here.</EmptyDescription>
  </EmptyHeader>
  <EmptyActions>
    <Button>New invoice</Button>
  </EmptyActions>
</Empty>

If the empty state is the only thing on a page, give the title the heading you need with as, such as as="h1".

Examples#

Different reasons#

The text should fit the reason. A search that found nothing offers to clear the filters. A lost connection offers to try again. A first-time screen invites people to start.

import { RefreshCw, SearchX, WifiOff } from "lucide-react"

import { Button } from "@hel/ui/button"

In a container#

Empty has no border or background of its own, so it fits wherever it is put. Use size="sm" inside a card, a panel or a table, and the default md on a page. Add a dashed border yourself for a drop zone.

import { Inbox, Upload } from "lucide-react"

import { Button } from "@hel/ui/button"

Props#

Empty#

EmptyMedia#

EmptyTitle#