elements
Manual UI Templates Empty

Empty

elements man ui/templates/empty

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

Example
import {
  Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent,
} from "@elements/ui/empty";
import { Icon } from "@elements/ui/icon";
import { Button } from "@elements/ui/button";

<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>

Parts

Part What it is
EmptyHeader .empty-header: media, title, description.
EmptyMedia .empty-media: an icon tile, an avatar, an image.
EmptyTitle .empty-title, role=heading.
EmptyDescription .empty-description, soft ink with underlined links.
EmptyContent .empty-content: actions or a search field.
.empty-actions A centered row of buttons.

Attributes

Empty

Attribute Type Default Description
title string "" Renders a header with a title.
description string "" Renders a description in that header.
variant "default" | "outline" | "muted" "default" outline is a dashed rule, muted a soft fill.
level 1 | 2 | 3 | 4 | 5 | 6 2 Heading level of the title.
class string "" Extra classes.
attrs Record<string, string | number | boolean | undefined> {} Other attributes for the root.

EmptyMedia

Attribute Type Default Description
variant "default" | "icon" "default" icon puts the icon on a muted tile.

EmptyTitle

Attribute Type Default Description
level 1 | 2 | 3 | 4 | 5 | 6 2 aria-level.

every part

Attribute Type Default Description
class string "" Extra classes.

Slots

Slot Part Content
icon Empty The icon for the header the title shortcut renders.
default Empty Parts, or anything.
default each part The part's content.

Data attributes

Attribute Values On
data-variant "default" | "outline" | "muted" root
data-variant "default" | "icon" EmptyMedia

Accessibility

  • The title is role="heading" (level 2 by default), so an empty page keeps its outline.
  • No live region of its own: when it replaces search results, announce the result count from the search.

See also