---
title: "EmptyState"
description: "What a list, table or panel shows with nothing to show. The default variant invites the first record; filtered says the filters hide every record, so the list reads as narrowed rather than empty; error says the records did not load and offers to try again."
---

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# EmptyState

## Nothing here yet

```tsx
import { UsersIcon } from '@phosphor-icons/react';
import { Button, EmptyState } from '@arbol-ai/ui';

<EmptyState
  actions={<Button>Add contact</Button>}
  description="Import a CSV or add your first contact by hand."
  icon={<UsersIcon aria-hidden />}
  title="No contacts yet"
/>
```

## No results for these filters

The title and the “Clear filters” button come from the library in the active language; the app passes what clearing does.

```tsx
import { EmptyState } from '@arbol-ai/ui';

<EmptyState onClearFilters={() => undefined} variant="filtered" />
```

## A load that failed

Read out when it appears; “Try again” waits while the retry runs.

```tsx
import { EmptyState } from '@arbol-ai/ui';

<EmptyState
  description="Check your connection and try again."
  onRetry={() => undefined}
  variant="error"
/>
```

## Without actions

```tsx
import { MegaphoneIcon } from '@phosphor-icons/react';
import { EmptyState } from '@arbol-ai/ui';

<EmptyState
  description="Campaigns you schedule appear here."
  icon={<MegaphoneIcon aria-hidden />}
  title="No campaigns scheduled"
/>
```

## Source

The examples above are [`src/components/empty-state/empty-state.examples.tsx`](https://github.com/getarbol/project-arbol-ui/blob/main/src/components/empty-state/empty-state.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/feedback/empty-state/index.mdx