Empty States

An empty state occurs when an element has no content to display. Depending on the context, it tells the user what is missing, why it is missing, and can offer guidance on next steps or alternative actions.

Code

Variants

Vertical

Create tables and figures Learn about tables and figures

Toggle dark mode

Horizontal

Create tables and figures

Toggle dark mode

Certara UI

packages/certara-ui/src/components/empty-state/empty-state.tsx

<certara-empty-state
  img=""
  headline=""
  description=""
  img-height=""
  img-width=""
  horizontal
  size="md"
>
  <span slot="actions">
    <certara-button color="brand">
      <certara-icon name="plus"></certara-icon>
      Create tables and figures
    </certara-button>
    <a href="https://help.certara.net/en/articles/9299407-viewing-figures" target="_blank" class="btn btn-link">
      Learn about tables and figures
      <certara-icon name="arrow-up-right-from-square"></certara-icon>
    </a>
  </span>
</certara-empty-state>

certara-empty-state

Properties

Property	Attribute	Description	Type	Default
description	description	Outputs text below headline	string	undefined
headline	headline	Outputs header as h1 (large) h3(default)	string	undefined
horizontal	horizontal	Toggles horizontal view	boolean	false
img	img	Path to image on filesystem	string	'welcome'
imgHeight	img-height	Height of image	number	undefined
imgWidth	img-width	Width of image	number	undefined
size	size	Outputs the .empty-state__title as an h1	"lg" | "md"	'md'
width	width	Optional width of the empty state. Cccepts a value of 30rem, 370px, or any valid CSS size value.	string	undefined

Slots

Slot	Description
"actions"	Buttons, links, more content
"description-slot"	HTML slot for the description. Outputs text below headline.
"headline-slot"	HTML slot for the headline. Outputs as h1 (large) h3(default).

---

HTML

<div class="empty-state">
  <img alt="" class="empty-state__item empty-state__img" height="126" src="" width="225" />
  <div class="empty-state__message">
    <h3 class="empty-state__item empty-state__title">…</h3>
    <div class="empty-state__item empty-state__description">
      <p>…</p>
    </div>
    <div class="empty-state__item empty-state__link">
      <a href="#" class="btn btn--brand">…</a>
      <a href="#" class="btn btn-link"
        >…
        <svg class="icon" aria-hidden="true">
          <use xlink:href="/assets/svg/regular.svg#arrow-up-right-from-square"></use></svg
      ></a>
    </div>
  </div>
</div>

List

We looked high and low, but... "dad" is not here

• Check your spelling
• Try different keywords
• Try using fewer words

Primary Learn more

Toggle dark mode

HTML

<div class="empty-state">
    <img alt="" class="empty-state__item empty-state__img" src="/assets/img/empty-states/groups-missing.svg" width="105"/>
    <div class="empty-state__message">
      <h2 class="empty-state__title--no-results">
        …
        <span>
          <span class="search-query"></span> is not here
        </span>
      </h2>
      <ul class="empty-state__tips-list">
        <li class="empty-state__tips-list-item">…</li>
      </ul>
      <div class="empty-state__item empty-state__link">
        …
      </div>
    </div>
  </div>
</div>

Full page

Helpful alternative information. Try this in the meantime

Toggle dark mode

Certara UI

<certara-empty-state
  size="lg"
  img=""
  headline=""
  description=""
  img-height=""
  img-width=""
  horizontal
>
  <span slot="actions">
   …
  </span>
</certara-empty-state>

HTML

<div class="d-flex flex-column align-items-center justify-content-center">
  <div class="empty-state">
    …
    <div class="empty-state__message">
      <h1 class="empty-state__item empty-state__title--lg">…</h1>
      <div class="empty-state__item empty-state__description">
        …
      </div>
      <div class="empty-state__item empty-state__link">
        …
      </div>
    </div>
  </div>
</div>

In Practice

• Display empty states in the space where the content would otherwise be shown.
• Can apply to full pages, page sections, cards, dashboards, tables, and side panels.
• Empty states can include:
• Image
• Title
• Description
• Buttons
• Links
• The size of the image is relative to the size of the container.
• If the container is very small, limit the empty state to text only.

When to use

Empty states can be caused by a variety of reasons. Some include:

• No data existing due to first time use of a feature.
• Access issues dues to permissions or other system configurations.
• User actions like search or filtering that returns no results, or the successful completion of a workflow.

Content guidelines

Empty states should be helpful and engaging for the user.

Title

• Clearly explain the reason for the empty state.
• Use positive or neutral language.

Description

• Let the user know what action, if any, they can take.
• Add further explanation for the empty state if necessary.

Button and links

• Labels should match the action described in the description.

Accessibility

• Images used on empty states do not need to be recognized by screen readers and other assistive technologies.
• For more information, see our accessibility guidelines.

Design resources

Illustrations can be downloaded in our image resources.

View component in Figma