Home
Previous componentNext component

Empty state

Open in fibo's StorybookOpen in Figma

An empty state fills the space where content would be. It says what's missing, why when that isn't obvious, and what to do next. Data table shows one when it has no rows, with Clear filters when a search or filter hid them, and Command menu and Filter menu show the small one as their no results line.

No members yet

Invite people to work on this project with you.

Empty stateA first-run empty state: what's missing, why, and one action.

Examples

No matching filters

Small, in a menuThe title alone, in muted text. Command menu and Filter menu show their no results line this way.

No matching members

Try another search, or clear the filters.

No matchesWhen a search or filter hid everything, say so and offer the way back.

You're all caught up

Title onlyWhen there's nothing to do about it, the title is enough.

Anatomy

A centred column: an icon in a muted tile, the title, a description and one or two buttons. Only the title is required.

No members yet

Invite people to work on this project with you.

  1. Media
  2. Title
  3. Description
  4. Actions
  5. Empty state
The partsThe first-run example.

Guidelines

  • 01Name what's missing in the title: No members yet, not Nothing here.
  • 02Tell first-run empty apart from no matches. One invites people to add something, the other to clear a search.
  • 03One primary action at most. A second one, if any, is outline or ghost.
  • 04Leave the icon out of small empty states; a menu has no room for it.

Best practices

No members yet

DoSay what's missing and offer the next step.

Nothing here

There is no data to display at this time.

Don'tDon't leave people with a dead end.

Accessibility

There's nothing to focus but its buttons, which are ordinary buttons in the tab order.

  • 01The title and description are plain text, read in order with what's around them.
  • 02The icon is hidden from screen readers; the title says it in words.
  • 03Where an empty state replaces results as someone types, put it in a live region so the change is announced. Command menu's already is.