Empty state — No results with suggestions

A left-aligned no-results panel with a query badge, three suggestions and recovery actions. Use it after a search or filter returns no matches.

ReactHTML

1440 × 480

Open in new tab

Component.tsx24 lines

export default function EmptyStateNoResults() {
  return (
    <div className="w-72 rounded-lg border border-neutral-200 bg-white p-6 text-neutral-900 sm:w-96">
      <div className="flex items-center gap-3">
        <span aria-hidden="true" className="flex size-10 shrink-0 items-center justify-center rounded-md bg-neutral-100 text-neutral-900">
          <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-5">
            <path d="M21 21l-5-5M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0" />
          </svg>
        </span>
        <span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">&quot;Query label&quot;</span>
      </div>
      <h2 className="mt-4 text-base font-semibold">No results for this search</h2>
      <ul role="list" className="mt-4 grid gap-2 text-sm text-neutral-600">
        <li className="flex items-center gap-2"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-4 shrink-0 text-neutral-400"><path d="M9 12h6" /></svg>Try broader search terms</li>
        <li className="flex items-center gap-2"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-4 shrink-0 text-neutral-400"><path d="M9 12h6" /></svg>Remove an active filter</li>
        <li className="flex items-center gap-2"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-4 shrink-0 text-neutral-400"><path d="M9 12h6" /></svg>Check the query spelling</li>
      </ul>
      <div className="mt-5 flex flex-wrap items-center gap-3">
        <a href="#" className="inline-flex h-11 items-center justify-center rounded-md border border-neutral-300 bg-white px-5 text-sm font-medium text-neutral-900 transition-colors hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">Clear filters</a>
        <a href="#" className="text-sm font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">Browse all items</a>
      </div>
    </div>
  )
}

Pattern notes

When to use: Use after a search that found no matches. Pick empty-state-centered-icon when nothing has been created yet. Variations: show the active filter instead of the query, replace spelling advice with a date suggestion, or link to a search guide.
Hierarchy: Read the query context, 16px semibold heading, three suggestions and recovery actions. The badge holds a query label up to 3 words. Keep each suggestion to 4 words and the heading to 6. Clear filters is a 44px outlined control; browsing is an underlined 14px link.
Responsive: The same left-aligned stack stays at all widths. The panel grows from 288px to 384px at 640px. The two actions wrap on mobile rather than narrowing their labels; suggestions stay on one line and the total height stays below 340px.
Layout: A 288px (w-72), 384px from 640px (sm:w-96), bordered rounded-lg panel with 24px padding. The top row pairs a 40px search tile with a neutral-300 outlined query badge. A 16px heading follows by 16px. Three 14px suggestion rows use 8px gaps and 16px decorative bullet glyphs. The action row has 20px top spacing and wraps with 12px gaps.
States: All links and buttons show a 2px neutral-900 focus-visible outline offset 2px. Primary actions hover to neutral-700, secondary actions to neutral-50, and underlined links to neutral-600. Transitions use the default 150ms timing. The query badge and suggestion list are static; no selected or expanded state.

Desktop wireframe

┌──────────────────────────────────────────────────────┐
│Search icon     [Query label]                         │
│No results for this search                            │
│  - Suggestion for search terms                       │
│  - Suggestion for fewer filters                      │
│  - Suggestion for spelling                           │
│[Clear filters] [Browse all items]                    │
└──────────────────────────────────────────────────────┘

View all

Empty state — Access required
Layout tags: stacked,icons,compact
Empty state — Centred icon with action
Layout tags: centered,icons,compact
Empty state — Empty archive with retention summary
Layout tags: split,compact,list

Empty state — No results with suggestions

Pattern notes

More in Empty state

Empty state — Access required

Empty state — Centred icon with action

Empty state — Empty archive with retention summary