# Empty state

> What a view shows when it has nothing to list: an icon, a heading, text and actions.

## Anatomy

An `.empty-state` fills the space of a view that has nothing to show yet. It says what is missing and what the user can do about it.

It holds these parts, in order:

1.  An optional leading icon, which sits in a tonal circle.
2.  A heading at the level the page outline needs.
3.  A `<p>` of supporting text.
4.  An `.empty-state-actions` row of buttons.

Everything is centered.

### No messages yet

Messages from your team show up here.

New message

```
<div class="empty-state">
  <span class="material-symbols" aria-hidden="true">inbox</span>
  <h2>No messages yet</h2>
  <p>Messages from your team show up here.</p>
  <div class="empty-state-actions">
    <button class="filled">New message</button>
  </div>
</div>
```

## No results

When a search or filter empties a list, name the query and offer the way back as the action.

### No results for "invoices 2019"

Check the spelling or search all folders.

Clear search Search all folders

```
<div class="empty-state">
  <span class="material-symbols" aria-hidden="true">search_off</span>
  <h3>No results for "invoices 2019"</h3>
  <p>Check the spelling or search all folders.</p>
  <div class="empty-state-actions">
    <button class="outlined">Clear search</button>
    <button class="text">Search all folders</button>
  </div>
</div>
```

## Illustration

To lead with a picture instead of the icon, use an `<img>`. It keeps its ratio up to 240px wide. Give it `alt=""` when the heading already says what it shows.

### Start your first trip

Plan a route and it appears here, ready to share.

Plan a route

```
<div class="empty-state">
  <img src="trip.svg" alt="" width="240" height="160">
  <h2>Start your first trip</h2>
  <p>Plan a route and it appears here, ready to share.</p>
  <div class="empty-state-actions">
    <button class="filled">Plan a route</button>
  </div>
</div>
```

## Tokens

Override these on the `.empty-state`.

| Token | Default |
| --- | --- |
| `--md-comp-empty-state-padding` | 48px 24px |
| `--md-comp-empty-state-max-width` | 40ch (heading and text) |
| `--md-comp-empty-state-icon-size` | 48px |
| `--md-comp-empty-state-icon-container-size` | 96px |
| `--md-comp-empty-state-icon-container-color` | `--md-sys-color-surface-container-high` |
| `--md-comp-empty-state-image-max-width` | 240px |