EmptyState

Explains why there is nothing to show (no results, an empty folder, a caught-up inbox, no access) and offers what to do next.

No matching records

Try a broader search or remove one of your filters.

Search tips

Usage

Import the component and render it.

import { EmptyState } from 'src/components/EmptyState/EmptyState';
import { FileMagnifyingGlassIcon } from '@phosphor-icons/react';

<EmptyState
  icon={<FileMagnifyingGlassIcon />}
  title="No matching records"
  description="Try a broader search or remove one of your filters."
  primaryAction="Clear filters"
  secondaryAction="Edit search"
  linkLabel="Search tips"
  linkHref="#"
/>

Accessibility

Role: none of its own: a heading (the title), text and the actions; the icon is decorative.

Key	Action
`Tab`	Moves through the Buttons and the Text Link

The title is a real heading (level 3 by default; set headingLevel to fit the page).
Write action labels that make sense on their own (e.g. "Clear filters", not "Click here").

Type

Type only changes the content: each example passes its own props.

No matching records

Try a broader search or remove one of your filters.

Search tips

No results

This folder is empty

Files and documents added to this workspace will appear here, ready for your team to review and organize.

Learn about folders

Empty folder

You’re all caught up

New messages will appear here.

Manage notifications

Empty inbox

You don’t have access

This space is limited to invited members. Ask a workspace owner to update your permissions if you need access.

Learn about permissions

Restricted access

<EmptyState
  icon={<FileMagnifyingGlassIcon />}
  title="No matching records"
  description="Try a broader search or remove one of your filters."
  primaryAction="Clear filters"
  secondaryAction="Edit search"
  linkLabel="Search tips"
/>
<EmptyState
  icon={<FolderIcon />}
  title="This folder is empty"
  description="Files and documents added to this workspace will appear here, ready for your team to review and organize."
  primaryAction="Upload files"
  secondaryAction="Create folder"
  linkLabel="Learn about folders"
/>
<EmptyState
  icon={<TrayIcon />}
  title="You’re all caught up"
  description="New messages will appear here."
  primaryAction="Compose"
  secondaryAction="View archive"
  linkLabel="Manage notifications"
/>
<EmptyState
  icon={<LockIcon />}
  title="You don’t have access"
  description="This space is limited to invited members. Ask a workspace owner to update your permissions if you need access."
  primaryAction="Request access"
  secondaryAction="Go back"
  linkLabel="Learn about permissions"
/>

Composition

Use the following composition to build an EmptyState:

EmptyState
├── Button
└── TextLink

Actions

Pass callbacks to respond to the component.

import { EmptyState } from 'src/components/EmptyState/EmptyState';
import { FileMagnifyingGlassIcon } from '@phosphor-icons/react';

<EmptyState
  icon={<FileMagnifyingGlassIcon />}
  title="No matching records"
  description="Try a broader search or remove one of your filters."
  primaryAction="Clear filters"
  secondaryAction="Edit search"
  linkLabel="Search tips"
  linkHref="#"
  onPrimaryAction={() => console.log('onPrimaryAction')}
  onSecondaryAction={() => console.log('onSecondaryAction')}
/>

Callback	When
`onPrimaryAction`	Called when the primary Button is activated.
`onSecondaryAction`	Called when the secondary Button is activated.