Skip to main content
Frontend Glossary

Layouts · Page types

Empty State

Also called: Empty, Blank state, Zero state, No data state, No results

A placeholder shown when a list, table or page has no content. It uses an illustration and one sentence to explain why it's empty, plus a button for the next step.

Click “Labeled” to see what each part is called, or “Anti-pattern” to see the most common mistake.

How to tell AI

Swap in your own content first

When the list has no data, show an empty state. Center it horizontally and vertically in the list area: a 120px gray line illustration, then the title "No projects yet" and a line of gray description "Create your first project to start managing your tasks", then a primary "New project" button. When a search has no results, change it to "No matching results" and offer a "Clear filters" button. Don't show the empty state while loading or when loading fails.

Send to

01Decide

Does your content look like this?

Check both columns to confirm Empty State is what you need.

Use Empty State when

  • An area like a list or table currently has no data at all
  • A new user is using the product for the first time and needs guidance to create their first item
  • A search or filter has no matching results and users need to know what to do next

Pick something else when

  • The data is still loading (show a loading state or skeleton screen)

    Use insteadLoading StateSkeleton

  • The request failed or the user doesn't have permission (show an error state)

    Use insteadError State

  • The area has content, just not much of it

Not sure? Upload a screenshot and page analysis will check which layout each block should use.

02Pitfalls

Common misuse

It looks like it works, but it makes things harder for users.

  1. 01

    Only "No data" is shown, with no reason and no next step

    The wireframe below shows this case. The red dashed box marks the problem.

  2. 02

    The empty state flashes briefly before the data finishes loading, then the real content pops in

  3. 03

    The empty state saying "No data" shows up even when the API returns an error, hiding the real problem

Anti-pattern, matches item 01

03Spot it

How to spot it

Look at the overall structure first, then check a few features you can spot at a glance.

Structure

An illustration or icon, a title, one line of description and an action button stacked vertically in the content area, centered both horizontally and vertically.

PartsClick one to highlight it in the wireframe above

04Explained

In detail

An empty state shows up when "there's no data yet": a new user opens the project list for the first time, a search has no results, filters match nothing, or all messages have been read. It usually shows a gray illustration or icon in the center, a one-line title ("No projects yet"), a one-line description ("Create your first project to start managing your tasks") and a primary button ("New project").

Its value is turning a dead end into guidance. If you just leave a blank area, users will think the page is broken or still loading. A good empty state explains why it's empty and tells users what they can do next.

Tell the different kinds of "empty" apart. Empty on first use should guide users to create something; empty after a search or filter should suggest trying another keyword or clearing the filters. Loading, load failures and missing permissions aren't empty states at all. They should show a loading state and an error message respectively, instead of pretending there's "No data".

Developer info
Term ID
layout-empty-state
DOM selectors

The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).

  • .ant-empty
  • .el-empty
  • .arco-empty
  • .t-empty
  • .n-empty
Priority
1 · when several match at the same level, the higher priority wins
Version
v2 · updated Sep 29, 2026