# Empty State

> Source: https://design.nanatec.co.ke/components/empty-state/
> A placeholder for a region that has nothing to show — an unfilled list, a search with no matches, a feature not set up yet. Pairs a glyph with a short heading, an explanation and the action that resolves it.
> Status: stable
> Since: v0.0.28

## Preview

```html
<nana-empty-state title="No invoices yet" style="width:100%">
  Invoices you create will show up here.
  <nana-button slot="actions" variant="primary" size="sm">New invoice</nana-button>
</nana-empty-state>
```

## Installation

The empty state ships for all three targets. Pick the tab for your project — the
CLI detects which you are on and serves the matching implementation.

The attribute names and CSS hooks below are the Web Components reference.

## Slots

| Slot | Description |
|---|---|
| `(default)` | The explanatory body copy |
| `icon` | Custom glyph or illustration (overrides the default icon) |
| `actions` | Buttons that resolve the empty state |

## CSS Variables

| Variable | Default | Description |
|---|---|---|
| `--nana-empty-state-bg` | `transparent` | Custom background colour |
| `--nana-empty-state-color` | — | Custom text colour |
| `--nana-empty-state-border` | — | Custom border colour, when `bordered` |
| `--nana-empty-state-icon-color` | — | Custom glyph colour |
| `--nana-empty-state-glyph-size` | `2.5rem` | Custom glyph box size, overriding `size` |

## CSS Parts

| Part | Description |
|---|---|
| `base` | The empty-state container |
| `icon` | The leading glyph |
| `title` | The heading line |
| `description` | The body copy |
| `actions` | The actions area |

## Related components

<ul class="related not-content">
  <li><a href="/components/table/">Table</a></li>
  <li><a href="/components/select/">Select</a></li>
  <li><a href="/components/alert/">Alert</a></li>
  <li><a href="/components/skeleton/">Skeleton</a></li>
  <li><a href="/components/spinner/">Spinner</a></li>
  <li><a href="/components/card/">Card</a></li>
</ul>

## Storybook

See every state and prop interactively in Storybook: https://storybook.nanatec.co.ke/?path=/docs/components-empty-state--docs