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 #

Choose an example

Open in new window Copy link to example

<div class="rvt-empty-state">
  <div class="rvt-empty-state__content">
    <p>There's nothing here yet.</p>
  </div>
</div>

Open in new window Copy link to example

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

Open in new window Copy link to example

<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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" 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"/></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>

Elements #

Element	Description	Usage	Required	Multiple
Icon	Icon that appears at the top of the empty state container	Choose an icon from the Rivet icon library	Icon is optional	Component may contain only one Icon
Content	Text content that suggests next steps to the user	Limit to a few short sentences	Content is required	Component may contain only one Content
Action buttons	Buttons that guide the user toward creating content or reading documentation	Limit button text to a few words. Avoid more than two action buttons. Consider making the second action button a secondary or plain button.	Action buttons is optional	Component may contain multiple Action buttons

Usage #

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

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.