---
title: "SearchEmpty"
description: "An empty state for a search or filter with no matches."
category: Status
status: beta
since: 0.3.4
tags: [search, empty, state]
syncStatus: reviewed
verified: true
---

## Usage

### Basic
:::TuffDemoWrapper{demo="SearchEmptySearchEmptyDemo" code-lang="vue"}
---
code: |
  <template>
    <TxSearchEmpty
      title="No matches found"
      description="Try another keyword, clear filters, or broaden the search scope."
      surface="card"
      :primary-action="{ label: 'Reset filters', type: 'primary', icon: 'i-carbon-reset' }"
    />
  </template>
---
:::

### Dashboard Filter Toolbar
:::TuffDemoWrapper{demo="ComponentsSearchFiltersDemo" code-lang="vue"}
---
code: |
  <template>
    <TxSearchEmpty
      title="No matches"
      description="Try another keyword or filter scope, then search again."
      surface="card"
      :primary-action="{ label: 'Reset filters', type: 'primary', icon: 'i-carbon-reset' }"
      @primary="resetFilters"
    />
  </template>
---
:::

### Best Practices

- Use it after a query or filter matches nothing; use `TxNoData` for an unfiltered empty dataset.
- Echo the failed query or active filters nearby so users know what was searched.
- Offer a reset or broaden-scope action when the filter state is recoverable.
- Keep it inside the results container, not in a global toast or a detached banner.
- Use `surface="card"` when it replaces a whole result panel; keep `plain` for inline filter feedback.

## API Reference

Takes every [TxEmptyState](./empty-state.en.mdc) prop, event, and slot except `variant`, which is fixed to `search-empty`.

### Props

| Prop | Type | Default | Description |
|------|------|---------|------|
| `title` | `string` | `No results` | Overrides the preset title. |
| `description` | `string` | `Try a different keyword or filter.` | Overrides the recovery advice. |
| `icon` | `TxIconSource \| string \| null` | - | Replaces the search illustration; `null` hides the icon area. |
| `iconSize` | `number` | - | Icon size in px. |
| `layout` | `'vertical' \| 'horizontal'` | `'vertical'` | Direction of the icon and content. |
| `align` | `'start' \| 'center' \| 'end'` | `'center'` | Aligns the icon, copy, and actions. |
| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | Spacing, text scale, and illustration size. |
| `surface` | `'plain' \| 'card'` | `'plain'` | `card` adds a bordered container for result panels. |
| `primaryAction` | `EmptyStateAction` | - | Generated primary recovery action; emits `primary`. |
| `secondaryAction` | `EmptyStateAction` | - | Generated secondary recovery action; emits `secondary`. |
| `actionSize` | `TxButtonProps['size']` | `'sm'` | Default size of the generated buttons. |
| `loading` | `boolean` | `false` | Shows a spinner when no custom icon is given. |

### Events

| Event | Description |
|------|------|
| `primary` | Fires when the generated primary button is clicked. |
| `secondary` | Fires when the generated secondary button is clicked. |

### Slots

| Name | Description |
|------|------|
| `icon` | Replaces the search illustration. |
| `title` | Replaces the title. |
| `description` | Replaces the description. |
| `actions` | Replaces the generated primary and secondary buttons. |

## Technologies

- Source: `packages/tuffex/packages/components/src/search-empty/`.

<TuffDocSourceLink />