# Empty: No search results

> Swap the results for an empty state when filters match nothing, and offer a way out. A visually hidden `role="status"` announces the count, so screen reader users hear the change without the whole list being read.

Example: https://hextaui.com/docs/empty/examples/search-results
Component docs: https://hextaui.com/docs/empty.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/empty-search-results.json
```

This adds `components/examples/empty/search-results.tsx` with the Empty component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/empty/search-results.tsx"
"use client"

import * as React from "react"
import { IconFilterOff } from "@tabler/icons-react"

import { Button } from "@/components/ui/button"
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty"

const tasks = [
  { title: "Write release notes", done: true },
  { title: "Review pull requests", done: true },
  { title: "Plan the next sprint", done: false },
]

export function EmptySearchResults() {
  const [onlyOpen, setOnlyOpen] = React.useState(true)
  const visible = tasks.filter((task) => !onlyOpen || !task.done)
  const [query, setQuery] = React.useState("sprint")
  const results = visible.filter((task) =>
    task.title.toLowerCase().includes(query.toLowerCase())
  )

  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <div className="flex flex-wrap gap-2">
        <Button
          variant={query ? "secondary" : "outline"}
          size="sm"
          onClick={() => setQuery(query ? "" : "sprint")}
        >
          {query ? `Search: ${query}` : "No search"}
        </Button>
        <Button
          variant={onlyOpen ? "secondary" : "outline"}
          size="sm"
          onClick={() => setOnlyOpen(!onlyOpen)}
        >
          {onlyOpen ? "Open tasks only" : "All tasks"}
        </Button>
        <Button variant="outline" size="sm" onClick={() => setQuery("design")}>
          Search “design”
        </Button>
      </div>
      <p role="status" className="sr-only">
        {results.length === 1 ? "1 task" : `${results.length} tasks`}
      </p>
      <div>
        {results.length > 0 ? (
          <ul className="flex flex-col gap-1 rounded-xl border p-2 text-sm">
            {results.map((task) => (
              <li key={task.title} className="rounded-md px-2 py-1.5">
                {task.title}
              </li>
            ))}
          </ul>
        ) : (
          <Empty variant="outline" size="sm">
            <EmptyHeader>
              <EmptyMedia variant="icon">
                <IconFilterOff />
              </EmptyMedia>
              <EmptyTitle>No matching tasks</EmptyTitle>
              <EmptyDescription>
                Nothing matches “{query}” with the current filters.
              </EmptyDescription>
            </EmptyHeader>
            <EmptyContent>
              <Button
                variant="outline"
                size="sm"
                onClick={() => {
                  setQuery("")
                  setOnlyOpen(false)
                }}
              >
                Clear filters
              </Button>
            </EmptyContent>
          </Empty>
        )}
      </div>
    </div>
  )
}
```

## Props in this example

### Empty

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"default" \| "outline" \| "muted"` | `"default"` |  |
| `size` | `"default" \| "sm"` | `"default"` | sm tightens padding, gaps, the icon tile and the title. |

### EmptyMedia

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"default" \| "icon" \| "stack"` | `"default"` | icon puts an icon in a muted tile. stack raises the tile over two fanned cards that spread when the empty state is hovered. Both hide the media from assistive tech. |

## More Empty examples

- [Entrance](https://hextaui.com/docs/empty/examples/transition.md)
- [Outline](https://hextaui.com/docs/empty/examples/outline.md)
- [Muted](https://hextaui.com/docs/empty/examples/muted.md)
- [Small](https://hextaui.com/docs/empty/examples/small.md)
- [Avatar](https://hextaui.com/docs/empty/examples/avatar.md)
- [Avatar group](https://hextaui.com/docs/empty/examples/avatar-group.md)
- [Image](https://hextaui.com/docs/empty/examples/image.md)
- [In a card](https://hextaui.com/docs/empty/examples/in-card.md)
- [In a table](https://hextaui.com/docs/empty/examples/in-table.md)
- [In a popover](https://hextaui.com/docs/empty/examples/in-popover.md)
- [In a command list](https://hextaui.com/docs/empty/examples/in-command.md)
- [Heading level](https://hextaui.com/docs/empty/examples/heading.md)
- [Long content](https://hextaui.com/docs/empty/examples/long-content.md)
- [Right to left](https://hextaui.com/docs/empty/examples/rtl.md)