Empty State

<quiet-empty-state>

stable

since 1.0

Empty states guide users during first-time experiences or when content is missing, transforming blank spaces into opportunities with helpful visuals and clear actions.

A round cartoon bird happily singing along to music

My Podcasts

You haven't added any podcasts yet. Once you do, you'll be able to listen to them here.

Add podcasts

<quiet-empty-state style="min-height: 400px;">
  <img slot="illustration" src="/assets/images/undraw-happy-music.svg" alt="A round cartoon bird happily singing along to music">
  <h4>My Podcasts</h4>
  <p>You haven't added any podcasts yet. Once you do, you'll be able to listen to them here.</p>
  <quiet-button variant="primary" pill>Add podcasts</quiet-button>
</quiet-empty-state>

Examples Jump to heading

Providing content Jump to heading

Use the default slot to add content to the empty state. Headings and paragraphs work particularly well. Buttons can be added at the end, as needed.

You can adjust the size of the empty state using width, height, and similar CSS properties. Content will automatically be centered horizontally and vertically within the component.

No projects

Create your first project to get started

Create project

<quiet-empty-state style="min-height: 400px;">
  <h4>No projects</h4>
  <p>Create your first project to get started</p>
  <quiet-button variant="primary">
    <quiet-icon slot="start" name="plus"></quiet-icon>
    Create project
  </quiet-button>
</quiet-empty-state>

Adding illustrations Jump to heading

To show an illustration, slot an image or an icon into the illustration slot.

A cartoon cat sitting and staring at the camera

No food found

The cats are not thrilled. Please add good food soon.

<quiet-empty-state style="min-height: 400px;">
  <img slot="illustration" src="/assets/images/undraw-cat.svg" alt="A cartoon cat sitting and staring at the camera"></quiet-icon>
  <h4>No food found</h4>
  <p>The cats are not thrilled. Please add good food soon.</p>
</quiet-empty-state>

No upcoming events

Your calendar is clear. Schedule meetings or events to see them here.

<quiet-empty-state style="min-height: 400px;">
  <quiet-icon slot="illustration" name="calendar"></quiet-icon>
  <h4>No upcoming events</h4>
  <p>Your calendar is clear. Schedule meetings or events to see them here.</p>
</quiet-empty-state>

Styling empty states Jump to heading

Empty states come with a simple, minimal appearance. Feel free to customize them with your own styles.

Your cart is empty

Looks like it's time to buy cat food again

Feed the cats

<quiet-empty-state id="empty-state__styling">
  <quiet-icon slot="illustration" name="shopping-cart"></quiet-icon>
  <h4>Your cart is empty</h4>
  <p>Looks like it's time to buy cat food again</p>
  <quiet-button pill>Feed the cats</quiet-button>
</quiet-empty-state>

<style>
  #empty-state__styling {
    min-height: 400px;
    border-radius: 2rem;
    color: white;
    background-color: hsla(203.53846153846155, 82%, 30%, 1);
    background-image: 
      radial-gradient(circle at 102% 80%, hsla(267.62589928057554, 67%, 59%, 1) 0%, transparent 40.308866813608354%), 
      radial-gradient(circle at 39% 44%, hsla(203.2710280373832, 89%, 46%, 1) 0%, transparent 42.69144621670061%);
    background-blend-mode: normal, normal;

    h4 {
      color: inherit;
    }

    quiet-icon {
      font-size: 8rem;
      stroke-width: .75px;
      color: inherit;
    }
  }
</style>

API Jump to heading

Importing Jump to heading

The autoloader is the recommended way to import components but, if you prefer to do it manually, the following code snippets will be helpful.

CDN

npm

To manually import <quiet-empty-state> from the CDN, use the following code.

import 'https://cdn.jsdelivr.net/npm/@quietui/quiet@1.0.0/dist/components/empty-state/empty-state.js';

To manually import <quiet-empty-state> from npm, use the following code.

import '@quietui/quiet/dist/components/empty-state/empty-state.js';

Slots Jump to heading

Empty State supports the following slots. Learn more about using slots

Name	Description
(default)	Content to show in the empty state. Usually includes a heading, a paragraph, and sometimes buttons.
`illustration`	An optional illustration to show in the empty state. Works well with an image or a `<quiet-icon>` element.

CSS custom properties Jump to heading

Empty State supports the following CSS custom properties. You can style them like any other CSS property. Learn more about CSS custom properties

Name	Description	Default
`--content-width`	The maximum width of the empty state's content. When space is limited, the content will wrap automatically.	`40ch`
`--illustration-width`	The maximum width of the illustration. By default, this will be half of `--content-width`. This property does not affect the size of icons.

CSS parts Jump to heading

Empty State exposes internal elements that can be styled with CSS using the selectors shown below. Learn more about CSS parts

Name	Description	CSS selector
`content`	The container that wraps the content.	`::part(content)`
`illustration`	The container that wraps the illustration.	`::part(illustration)`

Empty State

My Podcasts

Examples Jump to heading #

Providing content Jump to heading #

No projects

Adding illustrations Jump to heading #

No food found

No upcoming events

Styling empty states Jump to heading #

Your cart is empty

API Jump to heading #

Importing Jump to heading #

Slots Jump to heading #

CSS custom properties Jump to heading #

CSS parts Jump to heading #