Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Empty State examples · Search

Clear Filters Suggestion Empty State for React

An empty state for a filter combination that matches nothing, with Clear All Filters and Browse All buttons.

Framework
UI library

When a combination of filters matches nothing, give the reader more than one way out. Under a filter icon, title and description, EmptyContent holds two buttons side by side: Clear All Filters with a reset icon, and an outline Browse All. Use it for faceted search, product catalogs and data views with many filters.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How are the two buttons laid out?

They sit in a div with flex gap-2 inside EmptyContent. Clear All Filters is a default Button with a RotateCcwIcon icon. Browse All is variant="outline" and has no icon.

Which part holds the filter icon?

EmptyMedia with variant="icon" wraps FilterIcon. That variant draws the icon tile and sets data-variant="icon".

What do the title and description say?

The title is "No results with current filters". The description says this combination returned nothing, and to try removing filters or starting over.

Why is one button outline?

Clear All Filters has no variant, so it uses the filled default. variant="outline" on Browse All keeps the same size and draws a border. Both labels are short enough for one row.

How do I stack the buttons?

EmptyContent is already a centered column with a gap. Drop the inner flex row, or set it to flex-col, and the buttons stack. Add w-full on each if they should match the content width.

Do the buttons clear filters by themselves?

No. They are plain buttons with no click handler in this file. Put the reset on Clear All Filters and the navigation on Browse All.

All 22 empty state examples