Empty State

<ahi-empty-state> | AhiEmptyState

Empty state can be used when there is no data to display to describe what the user can do next. Empty state provides an explanation and guidance to help the user progress.

Something’s wrong

We were unable to connect to the service. Click Retry to try again or View log to learn what happened.

Retry

View log

<ahi-empty-state>
  <h2>Something’s wrong</h2>
  <p>We were unable to connect to the service. Click Retry to try again or View log to learn what happened.</p>
  <div class="ahi-row ahi-gap-2 ahi-justify-content-center">
    <ahi-button variant="primary">Retry</ahi-button>
    <ahi-button>View log</ahi-button>
  </div>
</ahi-empty-state>

Examples

No results

No results found

Try adjusting your search term or filter options to find what you’re looking for.

Clear filters

<ahi-card>
  <ahi-empty-state>
    <h2>No results found</h2>
    <p>Try adjusting your search term or filter options to find what you’re looking for.</p>
    <ahi-button variant="primary">Clear filters</ahi-button>
  </ahi-empty-state>
</ahi-card>

Media

Use the media slot to show an illustration, icon, image, or animation above the content. An empty screen with something on it reads as “nothing here yet” rather than as an error.

No upcoming appointments

When this patient schedules an appointment, it will show up here.

Schedule an appointment

<ahi-empty-state>
  <ahi-icon slot="media" name="calendar-event" size="spot" color="var(--ahi-icon-subdued)"></ahi-icon>
  <h2>No upcoming appointments</h2>
  <p>When this patient schedules an appointment, it will show up here.</p>
  <ahi-button variant="primary">Schedule an appointment</ahi-button>
</ahi-empty-state>

The slot is deliberately unconstrained: the empty state sets the gap beneath the slotted content and nothing else, so whatever you put there keeps the size you give it. That leaves an <ahi-icon>, an inline <svg>, an <img>, and a container an animation renders into all equally valid.

No results found

Try adjusting your search term or filter options to find what you’re looking for.

Clear filters

<ahi-empty-state>
  <svg slot="media" width="96" height="96" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="color: var(--ahi-icon-subdued)">
    <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path>
    <path d="M21 21l-6 -6"></path>
  </svg>
  <h2>No results found</h2>
  <p>Try adjusting your search term or filter options to find what you’re looking for.</p>
  <ahi-button variant="primary">Clear filters</ahi-button>
</ahi-empty-state>

Importing

Script

Bundler

To import this component using a script tag:

<script type="module" src="/path/to/azalea-kit-ui/dist/components/empty-state/empty-state.js"></script>

To import this component using a bundler:

import '@azaleahealth/azalea-kit-ui/dist/components/empty-state/empty-state.js';

Slots

Name	Description
(default)	default slot.
`media`	An optional illustration, icon, or image shown above the content. Deliberately unconstrained: the empty state sets the gap beneath the slotted content and leaves every dimension to the consumer, so an `<ahi-icon>`, an inline `<svg>`, an `<img>` and an animation container are all equally valid here.

Learn more about using slots.