Empty States

What is an empty state?

An empty state is the screen or section a user sees when there is nothing to show: an inbox with no messages, a search with no results, a new project with no tasks, a cart with no items or a dashboard before any data exists. A good empty state replaces a blank area with a short explanation, a simple illustration or icon, and a clear next step, turning a dead end into guidance.

When to use empty states

• First use: explain what will appear here and offer the action that creates the first item, such as "Create your first project".
• No results: tell the user that the search or filter found nothing and suggest clearing filters or trying other words.
• Cleared: celebrate a finished task list or an empty inbox with a positive message.
• Errors: when data could not load, say so and offer a retry button.
• Keep the copy short and specific to the context, and keep the illustration light so it does not slow the page.

Accessibility tips

Use a real heading for the message so it fits the page outline, and keep the call to action as a proper <button> or link with descriptive text. Decorative illustrations should have empty alt text or aria-hidden="true". When results update dynamically, for example after typing in a search box, announce the "No results" message through a role="status" live region. Check that muted text colours still meet contrast requirements.

Bootstrap, Tailwind CSS and pure CSS versions

These empty state UI examples and no results page HTML CSS snippets are available for Bootstrap 6, Bootstrap 5, Tailwind CSS and pure CSS. Illustrations are inline SVG, so you can recolour them or replace them with your own artwork. Bootstrap 6 versions use the theme-* colour roles for icons and buttons. Use the framework filter and live preview to find a match, then copy the code from the code tabs or download it and rewrite the text for your feature.