Empty

The empty state for a list, a search or a page: media, a title, a line and what to do next.

No projects

title, description and an icon; actions and a link in EmptyContent.

No projects yet

You have not created a project. Start with your first one.

Code

<Empty title="No projects yet" description="You have not created a project. Start with your first one.">
  <Icon slot="icon" name="folder" />
  <EmptyContent>
    <div class="empty-actions">
      <Button variant="primary">Create project</Button>
      <Button>Import project</Button>
    </div>
    <a href="/docs">Learn more <Icon name="arrow-right" /></a>
  </EmptyContent>
</Empty>

Usage

import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent } from "@elements/ui/empty";

<Empty title="No projects yet" description="Create your first project to get started.">
  <Icon slot="icon" name="folder" />
  <EmptyContent>
    <Button variant="primary">Create project</Button>
  </EmptyContent>
</Empty>

Examples

Outline

Composed from parts, with a dashed rule.

Cloud storage is empty

Upload files to your cloud storage to see them here.

Code

<Empty variant="outline">
  <EmptyHeader>
    <EmptyMedia variant="icon"><Icon name="cloud" /></EmptyMedia>
    <EmptyTitle>Cloud storage is empty</EmptyTitle>
    <EmptyDescription>Upload files to your cloud storage to see them here.</EmptyDescription>
  </EmptyHeader>
  <EmptyContent><Button size="sm">Upload files</Button></EmptyContent>
</Empty>

Muted

A soft fill.

No notifications

You are all caught up. New notifications will appear here.

Code

<Empty variant="muted" title="No notifications" description="You are all caught up.">
  <Icon slot="icon" name="bell" />
  <EmptyContent><Button size="sm"><Icon name="loader" /> Refresh</Button></EmptyContent>
</Empty>

Avatar

EmptyMedia holds an avatar, or a group of them.

Ada is offline

Leave a message and she will see it when she is back.

No team members

Invite your team to work on this project together.

Code

<Empty>
  <EmptyHeader>
    <EmptyMedia>
      <Avatar size="lg" src={user.photo} alt="Ada Lovelace"><AvatarBadge tone="muted" label="Offline" /></Avatar>
    </EmptyMedia>
    <EmptyTitle>Ada is offline</EmptyTitle>
    <EmptyDescription>Leave a message and she will see it when she is back.</EmptyDescription>
  </EmptyHeader>
  <EmptyContent><Button size="sm">Leave a message</Button></EmptyContent>
</Empty>

Not found

A search field in EmptyContent, and a link in a description.

404 - Not found

The page you are looking for does not exist. Try a search.

/

Need help? Contact support

Code

<Empty title="404 - Not found" description="The page you are looking for does not exist. Try a search.">
  <EmptyContent>
    <InputGroup>
      <Input type="search" placeholder="Search pages" attrs={{ "aria-label": "Search pages" }} />
      <InputGroupAddon><Icon name="search" /></InputGroupAddon>
      <InputGroupAddon align="inline-end"><Kbd>/</Kbd></InputGroupAddon>
    </InputGroup>
    <p class="empty-description">Need help? <a href="/support">Contact support</a></p>
  </EmptyContent>
</Empty>

Loading

A Spinner as media while the content is on its way.

Processing your request

This takes a moment. You can leave this page.

Code

<Empty title="Processing your request" description="This takes a moment. You can leave this page.">
  <Spinner slot="icon" />
  <EmptyContent><Button size="sm">Cancel</Button></EmptyContent>
</Empty>

Custom class

Every part takes class, appended to its own.

No new messages

Messages from your team will show here.

Code

<Empty class="empty-demo-custom">
  <EmptyHeader>
    <EmptyMedia variant="icon"><Icon name="bell" /></EmptyMedia>
    <EmptyTitle class="empty-demo-custom-title">No new messages</EmptyTitle>
    <EmptyDescription>Messages from your team will show here.</EmptyDescription>
  </EmptyHeader>
</Empty>

/* page.css */
.empty.empty-demo-custom { border-radius: var(--radius-surface); background: var(--accent-soft); }
.empty-title.empty-demo-custom-title { color: var(--accent); }

RTL

The empty state is centered, so it reads the same in a right-to-left region.

لا توجد مشاريع

لم تنشئ أي مشروع بعد. ابدأ بمشروعك الأول.

Code

<div dir="rtl">
  <Empty title="لا توجد مشاريع" description="لم تنشئ أي مشروع بعد.">
    <Icon slot="icon" name="folder" />
    <EmptyContent><Button variant="primary">إنشاء مشروع</Button></EmptyContent>
  </Empty>
</div>

Reference Empty in the manual Every part, attribute, slot, key and data attribute.