Skip to main content

Empty state

Show a placeholder and suggest first steps when there is no content

Overview #

Use the empty state component as a placeholder when there is no content to show the user. You can also suggest first steps the user might take, such as creating their first piece of content or reading your application’s documentation.

Users often encounter empty states when they are using a web application for the first time and have not yet saved any data or received any submissions.

Examples #


<div class="rvt-empty-state">
<div class="rvt-empty-state__content">
<p>There's nothing here yet.</p>
</div>
</div>
<div class="rvt-empty-state">
<div class="rvt-empty-state__content">
<p>There's nothing here yet.</p>
</div>
<div class="rvt-empty-state__actions">
<button class="rvt-button" type="button">Create your first item</button>
<a href="#" class="rvt-button rvt-button--plain">Read the documentation</a>
</div>
</div>
<div class="rvt-empty-state">
<div class="rvt-empty-state__content">
<div class="rvt-p-all-md rvt-m-bottom-md rvt-bg-black-100 rvt-inline-flex rvt-border-radius-circle">
<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16"><path d="M10 14h5.5v-2h-1.382l-.366-.733a2.86 2.86 0 0 1-.298-1.12l-.234-4.209A5.23 5.23 0 0 0 9 1.096V0H7v1.096a5.23 5.23 0 0 0-4.22 4.842l-.234 4.209a2.86 2.86 0 0 1-.298 1.12L1.882 12H.5v2H6a2 2 0 1 0 4 0Zm1.886-2H4.114a4.86 4.86 0 0 0 .429-1.742l.234-4.209a3.228 3.228 0 0 1 6.446 0l.234 4.209A4.86 4.86 0 0 0 11.886 12Z"></path></svg>
</div>
<p>There's nothing here yet.</p>
</div>
<div class="rvt-empty-state__actions">
<button class="rvt-button" type="button">Create your first item</button>
<a href="#" class="rvt-button rvt-button--plain">Read the documentation</a>
</div>
</div>

Usage #

  • Use the Rivet icon set. You can copy and paste icon SVG code from the Rivet icon library.

Do

  • Use to orient a new user when there is no saved data to show them
  • Suggest actions a user can take to start using your application
  • Guide a user toward your documentation or other training resources

Don't

  • Use as a loading state for the data on the page—use a loading indicator instead
  • Use to emphasize important page content—use a card instead
  • Use to show an error—use an alert instead
  • Put more than one or two sentences of placeholder text

Accessibility #

  • Hide the icon from screen readers. When copying an SVG icon from the Rivet icons GitHub repo, make sure to add the aria-hidden="true" attribute. See the “Empty state with actions and icon” code example on this page for guidance.