Empty

What to show when a list or a panel has nothing in it.

import { Empty } from "@openperf/deft";

import { Preview } from "../../src/Preview";

export default function EmptyBasic() {
  return (
    <Preview>
      <Empty.Root>
        <Empty.Title>Title</Empty.Title>
        <Empty.Description>Description</Empty.Description>
      </Empty.Root>
    </Preview>
  );
}

• The title says what is empty; the description says why or what to do.
• No illustration and no icon. At most one ghost action.
• Use size="sm" inside a block of a dashboard, where a page-sized empty state would push the layout apart.
• Inside a List, use List.Empty.

API

Parts: Root, Actions, Description, Title. Other props go to the native element: div for Root and Actions, p for Description and Title.