Preview

Installation

npx sigma-ui@latest add empty

Usage

<script setup lang="ts">
import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from '@/components/ui/empty';
</script>

<template>
  <Empty>
    <EmptyHeader>
      <EmptyMedia variant="icon">
        <FolderIcon />
      </EmptyMedia>
      <EmptyTitle>No projects yet</EmptyTitle>
      <EmptyDescription>Create a project to get started.</EmptyDescription>
    </EmptyHeader>
  </Empty>
</template>

Put the next action, such as a button, in EmptyContent.

Examples

With action

API Reference

Empty

Slots

Slot	Scope
default EmptyHeader, EmptyMedia, and EmptyContent.	-

EmptyContent

Slots

Slot	Scope
default Actions, such as a button, under the description.	-

EmptyDescription

Slots

Slot	Scope
default Explanation of the empty state. Links inside it are underlined.	-

EmptyHeader

Slots

Slot	Scope
default EmptyMedia, EmptyTitle, and EmptyDescription.	-

EmptyMedia

Props

Prop	Type	Default
variant icon draws a muted tile behind the icon. default leaves the content unstyled.	"default" | "icon" | null	-

Slots

Slot	Scope
default Icon or illustration.	-

EmptyTitle

Slots

Slot	Scope
default Short title of the empty state.	-

Accessibility

The empty state is presentational. The title and description are regular text, and the action is a button, so it is reachable with the keyboard.

Key	Description
Tab	Moves focus to the action inside the empty state.