Empty

Use the Empty component to display an empty state.

Code

import {
  ArrowUpRightIcon,
  Button,
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
  PackageIcon,
} from "@falcon/ui-kit";

export function Example() {
  return (
    <Empty>
      <EmptyHeader>
        <EmptyMedia variant="icon">
          <PackageIcon />
        </EmptyMedia>
        <EmptyTitle>No Orders Yet</EmptyTitle>
        <EmptyDescription>
          You haven&apos;t created any orders yet. Get started by creating your
          first order.
        </EmptyDescription>
      </EmptyHeader>
      <EmptyContent className="tw:flex-row tw:justify-center tw:gap-2">
        <Button>Create Order</Button>
        <Button variant="outline">Import Orders</Button>
      </EmptyContent>
      <Button
        variant="link"
        render={<a href="#" />}
        className="tw:text-muted-foreground"
        size="sm"
        nativeButton={false}
      >
        Learn More <ArrowUpRightIcon />
      </Button>
    </Empty>
  );
}

Composition

Use the following composition to build an Empty state:

Empty
├── EmptyHeader
│   ├── EmptyMedia
│   ├── EmptyTitle
│   └── EmptyDescription
└── EmptyContent

Outline

Use the tw:border utility class to create an outline empty state.

Code

import {
  Button,
  CloudIcon,
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@falcon/ui-kit";

export function Example() {
  return (
    <Empty className="tw:border tw:border-dashed">
      <EmptyHeader>
        <EmptyMedia variant="icon">
          <CloudIcon />
        </EmptyMedia>
        <EmptyTitle>Cloud Storage Empty</EmptyTitle>
        <EmptyDescription>
          Upload files to your cloud storage to access them anywhere.
        </EmptyDescription>
      </EmptyHeader>
      <EmptyContent>
        <Button variant="outline" size="sm">
          Upload Files
        </Button>
      </EmptyContent>
    </Empty>
  );
}

Background

Use the tw:bg-* and tw:bg-gradient-* utilities to add a background to the empty state.

Code

import {
  BellIcon,
  Button,
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
  RefreshCcwIcon,
} from "@falcon/ui-kit";

export function Example() {
  return (
    <Empty className="tw:min-h-72 tw:bg-muted/30">
      <EmptyHeader>
        <EmptyMedia variant="icon">
          <BellIcon />
        </EmptyMedia>
        <EmptyTitle>No Notifications</EmptyTitle>
        <EmptyDescription className="tw:max-w-xs tw:text-pretty">
          You&apos;re all caught up. New notifications will appear here.
        </EmptyDescription>
      </EmptyHeader>
      <EmptyContent>
        <Button variant="outline">
          <RefreshCcwIcon data-icon="inline-start" />
          Refresh
        </Button>
      </EmptyContent>
    </Empty>
  );
}

InputGroup

You can add an InputGroup component to the EmptyContent component.

Code

import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyTitle,
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
  SearchIcon,
} from "@falcon/ui-kit";

export function Example() {
  return (
    <Empty>
      <EmptyHeader>
        <EmptyTitle>404 - Not Found</EmptyTitle>
        <EmptyDescription>
          The page you&apos;re looking for doesn&apos;t exist. Try searching for
          what you need below.
        </EmptyDescription>
      </EmptyHeader>
      <EmptyContent>
        <InputGroup className="tw:sm:w-3/4">
          <InputGroupInput
            aria-label="Search pages"
            placeholder="Try searching for pages..."
          />
          <InputGroupAddon>
            <SearchIcon />
          </InputGroupAddon>
          <InputGroupAddon align="inline-end">
            <kbd className="tw:rounded-sm tw:border tw:border-border tw:bg-muted tw:px-1.5 tw:py-0.5 tw:text-xs tw:text-muted-foreground">
              /
            </kbd>
          </InputGroupAddon>
        </InputGroup>
        <EmptyDescription>
          Need help? <a href="#">Contact support</a>
        </EmptyDescription>
      </EmptyContent>
    </Empty>
  );
}

API

Empty

Renders an empty-state container as a <div> element and accepts standard <div> props.

EmptyContent

Contains empty-state actions or supporting content. Renders a <div> element and accepts standard <div> props.

EmptyDescription

Provides supporting text for the empty state. Renders a <div> element and accepts standard <div> props.

EmptyHeader

Groups an empty state’s media, title, and description. Renders a <div> element and accepts standard <div> props.

EmptyMedia

Contains empty-state media. Renders a <div> element and accepts standard <div> props.

Props

variant

variant?: "default" | "icon" | null = "default"

Controls whether media is displayed as an icon. The icon variant sizes a nested icon automatically; omit size on it.

EmptyTitle

Provides the empty state’s title. Renders a <div> element and accepts standard <div> props.