Empty State

<wa-empty-state>

Experimental

added

Communicates that a collection or view has no content, with an optional graphic and supporting text.

<wa-empty-state
  icon="mdi:inbox-outline"
  headline="No items yet"
  message="Add your first item to get started."
></wa-empty-state>

Examples

Link to This Section

With an image

Link to This Section

Use image-src instead of icon to display an illustration. The headline becomes the image's alternative text.

<wa-empty-state
  image-src="https://picsum.photos/seed/empty-state/160"
  headline="No results"
  message="Try adjusting your filters."
></wa-empty-state>

Alignment

Link to This Section

Use logical alignment values so the layout follows the document's writing direction.

<wa-empty-state
  alignment="start"
  icon="mdi:inbox-outline"
  headline="Nothing scheduled"
  message="Create an appointment to fill this view."
></wa-empty-state>

Custom graphic size

Link to This Section

The graphic part can resize either an icon or image.

<wa-empty-state class="compact-empty-state" icon="mdi:magnify" headline="No matches"></wa-empty-state>

<style>
  .compact-empty-state::part(graphic) {
    font-size: 2rem;
  }
</style>

Notes

Link to This Section

Set either icon or image-src. When both are present, icon takes precedence.
Override --wa-empty-state-min-height to change the component's minimum height.
The default alignment is center; start and end are also available.

API

Link to This Section

Importing

Link to This Section

If you're using the autoloader or a hosted project, components load on demand — no manual import needed. To cherry-pick a component manually, use one of the following snippets.

CDN

npm

Self-Hosted

React

Import this component directly from the CDN:

import 'https://cdn.yoummday.com/packages/@yoummday/webawesome/0.5.1/dist/components/empty-state/empty-state.js';

After installing Web Awesome via npm, import this component:

import '@yoummday/webawesome/dist/components/empty-state/empty-state.js';

If you're self-hosting Web Awesome, import this component from your server:

import './webawesome/dist/components/empty-state/empty-state.js';

To import this component for React 18 or below, use the following code:

import WaEmptyState from '@yoummday/webawesome/dist/react/empty-state/index.js';

Attributes & Properties

Link to This Section

Learn more about attributes and properties.

Name	Description	Reflects
`alignment` `alignment`	Aligns the content using logical directions. Type `'start' \| 'center' \| 'end'` Default `'center'`
`headline` `headline`	The empty state's headline. It is also used as the image's alternative text. Type `string` Default `''`
`icon` `icon`	The name of the Web Awesome icon to show. Takes precedence over `imageSrc`. Type `string` Default `''`
`imageSrc` `image-src`	The URL of an image to show when no icon is set. Type `string` Default `''`
`message` `message`	Supporting text displayed below the headline. Type `string` Default `''`

CSS Custom Properties

Link to This Section

Learn more about CSS custom properties.

Name	Description
`--wa-empty-state-min-height`	The minimum height of the component. Default `8rem`

CSS Parts

Link to This Section

Learn more about CSS parts.

Name	Description	CSS selector
`empty-state`	The component's content container.	`::part(empty-state)`
`graphic`	The wrapper around the icon or image.	`::part(graphic)`
`headline`	The headline element.	`::part(headline)`
`message`	The supporting message element.	`::part(message)`
`base`	An alias for the component's content container.	`::part(base)`

Dependencies

Link to This Section

This component automatically imports the following elements. Sub-dependencies, if any exist, will also be included in this list.

<wa-icon>

Need a hand?

Report a bug

Ask for help

Empty State

Examples

With an image

Alignment

Custom graphic size

Notes

API

Importing

Attributes & Properties

CSS Custom Properties

CSS Parts

Dependencies

Quick Links

Recent Searches