---
title: "Empty"
description: "A compact empty-state card for panels and filtered results."
category: Status
status: beta
since: 0.3.4
tags: [empty, state, placeholder]
syncStatus: reviewed
verified: true
---

## Usage

### Basic
`compact` switches to the small size; `iconClass` replaces the icon.
:::TuffDemoWrapper{demo="EmptyEmptyDemo" code-lang="vue"}
---
code: |
  <template>
    <TxEmpty title="No matching results" description="Adjust filters or clear the search keyword." icon-class="i-carbon-search" compact />
  </template>
---
:::

### Action
:::TuffDemoWrapper{demo="EmptyEmptyActionDemo" code-lang="vue"}
---
code: |
  <template>
    <TxEmpty title="No items yet" description="Create the first item to start managing this list.">
      <template #action>
        <TxButton type="primary">New item</TxButton>
      </template>
    </TxEmpty>
  </template>
---
:::

### Best Practices

- Use `TxEmpty` for list, search, or panel placeholders that want a card surface.
- When the empty cause has product meaning, use `TxNoData`, `TxNoSelection`, `TxOfflineState`, or `TxPermissionState`.
- Set `compact` in dense regions such as sidebars and table interiors.
- Put click handling on the control in the `action` slot; `TxEmpty` emits no events.

## API Reference

Renders [TxEmptyState](./empty-state.en.mdc) with `variant="empty"`, `surface="card"`, and `layout="vertical"` fixed.

### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `title` | `string` | `'Nothing here'` | Main message. |
| `description` | `string` | `''` | Supporting text below the title. |
| `iconClass` | `string` | `'i-carbon-incomplete'` | Icon class, passed to `TxEmptyState` as `icon`. |
| `compact` | `boolean` | `false` | `true` sets `size="small"`; otherwise `medium`. |

### Slots

| Slot | Props | Description |
|------|------|-------------|
| `icon` | - | Replaces the `iconClass` icon. |
| `title` | - | Replaces the title. |
| `description` | - | Replaces the description. |
| `action` | - | Action area; replaces the `actions` slot of `TxEmptyState`. |

## Technologies

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

<TuffDocSourceLink />