Empty state

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.

<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.

<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.