# Empty state

Used when there is no data to display to describe what the user can do next. Empty state provides explanation and guidance to help user progress.

Tabs: [Guidelines](/components/web/empty-state/empty-state.guidelines.md) · [Code](/components/web/empty-state/empty-state.code.md)

## Basic usage

First, import the component.

```tsx
import {EmptyState} from '@pleo-io/telescope'
```

Then pass a `title`, and optionally a `subtitle`.

```tsx
<EmptyState
    title="You don't have any cards yet."
    subtitle="Once you've ordered and received your cards they'll appear here."
/>
```

## Image

Pass the illustration element as `illustration` to render it above the text. Import it from `@pleo-io/telescope-illustrations/web`.

```tsx
import {Card} from '@pleo-io/telescope-illustrations/web'
```

```tsx
<EmptyState illustration={<Card />} title="You don't have any cards yet." />
```

## Action

Pass an `action`, such as a `Button`, to offer a next step.

```tsx
<EmptyState
    illustration={<Card />}
    title="You don't have any cards yet."
    action={<Button variant="primary">Order a card</Button>}
/>
```

## Back button

Pass a `back` callback to render a secondary back button below the content.

```tsx
<EmptyState illustration={<Card />} title="No results" back={() => navigate(-1)} />
```

## Wide layout

Use `wide` to allow the text to take up more horizontal space.

```tsx
<EmptyState illustration={<Card />} wide title="You don't have any cards yet." />
```

## Localisation

The back button label is read from the `TelescopeProvider` translations as `EmptyState.BackButton`.

## API reference

#### `action`

Type: `Element | undefined`

Default: -

No description available

#### `back`

Type: `(() => void) | undefined`

##### Allowed values

- `() => void`

Default: -

No description available

#### `className`

Type: `string | undefined`

Default: -

No description available

#### `illustration`

Type: `Element | undefined`

Default: -

No description available

#### `subtitle`

Type: `string | Element | undefined`

Default: -

No description available

#### `title` (required)

Type: `string | Element`

Default: -

No description available

#### `wide`

Type: `boolean`

Default: `false`

No description available