---
title: "NoData"
description: "An empty state for a data source that returned no records."
category: Status
status: beta
since: 0.3.4
tags: [empty, data, table]
syncStatus: reviewed
verified: true
---

## Usage

### Basic
:::TuffDemoWrapper{demo="NoDataNoDataDemo" code-lang="vue"}
---
code: |
  <template>
    <TxNoData
      surface="card"
      title="No records yet"
      description="Create the first record to populate this table."
      :primary-action="{ label: 'Create record', type: 'primary' }"
    />
  </template>
---
:::

### Best Practices

- Use it when a data source loaded and returned no records; offline, access, loading, and no-match states have their own components.
- Keep copy data-specific: "No invoices yet" says more than "Nothing here".
- Offer an action only when the current user can actually create or import the data.
- Use `surface="card"` in dashboards and table panels so the empty region matches the loaded container.

## API Reference

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

### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `title` | `string` | preset title | Overrides the preset title. |
| `description` | `string` | preset description | Why the data is empty, or how to add some. |
| `icon` | `TxIconSource \| string \| null` | preset illustration | Replaces the illustration; `null` hides the icon area. |
| `iconSize` | `number` | size preset | Icon size in px. |
| `layout` | `'vertical' \| 'horizontal'` | `'vertical'` | Layout direction. |
| `align` | `'start' \| 'center' \| 'end'` | `'center'` | Content alignment. |
| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | Spacing and illustration size. |
| `surface` | `'plain' \| 'card'` | `'plain'` | `card` adds a card border. |
| `primaryAction` | `EmptyStateAction` | - | Generated primary action. |
| `secondaryAction` | `EmptyStateAction` | - | Generated secondary action. |
| `actionSize` | `TxButtonProps['size']` | `'sm'` | Default size of the generated buttons. |
| `loading` | `boolean` | `false` | Shows a spinner when no custom icon is given. |

### Events

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

### Slots

| Slot | Props | Description |
|------|------|-------------|
| `icon` | - | Replaces the illustration or icon. |
| `title` | - | Replaces the title. |
| `description` | - | Replaces the description. |
| `actions` | - | Replaces the generated primary and secondary buttons. |

### Types

#### EmptyStateAction

| Field | Type | Default | Description |
|------|------|---------|-------------|
| `label` | `string` | required | Button label. |
| `type` | `TxButtonProps['type']` | - | Semantic button type, such as `primary`. |
| `variant` | `TxButtonProps['variant']` | - | Visual button variant. |
| `size` | `TxButtonProps['size']` | `actionSize` | Size of this button. |
| `disabled` | `boolean` | `false` | Disables the button. |
| `icon` | `string` | - | Button icon class. |

## Technologies

- Source: `packages/tuffex/packages/components/src/no-data/`.

<TuffDocSourceLink />