Empty

Usage

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

<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <FolderPlusIcon />
    </EmptyMedia>
    <EmptyTitle>No projects yet</EmptyTitle>
    <EmptyDescription>Create a project to start tracking work.</EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button variant="brand">Create project</Button>
  </EmptyContent>
</Empty>

Examples

Loading, empty and error

One list in every state it can be in: skeleton rows while loading, an empty state with the next step, an error with a retry, and the data. Switch between them with the toggle.

Guidelines

• Say what's missing and what to do next. The action is often the view's primary action, so it can be brand.
• Different empties need different copy: "no projects yet" (first use), "no results" (a filter), "nothing due" (done). Don't reuse one.
• No illustrations of people or mascots. An icon in EmptyMedia is enough.
• An error is not an empty list. Say it failed, keep the user's data reassurance ("still running"), and offer a retry.