Empty state

Use this Empty component to display an empty state.

import { IconCubeOutline18 } from "@unkey/icons";
import {
  Button,
  EmptyState,
  EmptyStateActions,
  EmptyStateDescription,
  EmptyStateHeader,
  EmptyStateIcon,
  EmptyStateTitle,
} from "@unkey/ui";

export default function BasicEmptyState() {
  return (
    <EmptyState>
      <EmptyStateIcon>
        <IconCubeOutline18 />
      </EmptyStateIcon>
      <EmptyStateHeader>
        <EmptyStateTitle>No projects yet</EmptyStateTitle>
        <EmptyStateDescription>
          You haven't created any projects yet. Get started by creating your first project.
        </EmptyStateDescription>
      </EmptyStateHeader>
      <EmptyStateActions>
        <Button variant="primary" size="md">
          Create project
        </Button>
        <Button variant="outline" size="md">
          Read the docs
        </Button>
      </EmptyStateActions>
    </EmptyState>
  );
}

Examples

In a table

An example of how to use an empty component from within a table element.

import { IconSquareBulletListOutline18 } from "@unkey/icons";
import {
  Button,
  EmptyState,
  EmptyStateActions,
  EmptyStateDescription,
  EmptyStateHeader,
  EmptyStateIcon,
  EmptyStateTitle,
} from "@unkey/ui";

export default function TableEmptyState() {
  return (
    <div className="overflow-hidden rounded-lg border bg-background">
      <div className="flex items-center gap-4 border-b px-4 py-2.5 text-gray-9 text-xs">
        <div className="flex-1">Name</div>
        <div className="w-24">Status</div>
        <div className="w-28">Created</div>
      </div>
      <EmptyState frame="none">
        <EmptyStateIcon>
          <IconSquareBulletListOutline18 />
        </EmptyStateIcon>
        <EmptyStateHeader>
          <EmptyStateTitle>No deployments</EmptyStateTitle>
          <EmptyStateDescription>
            Deployments appear here once this project ships its first build.
          </EmptyStateDescription>
        </EmptyStateHeader>
        <EmptyStateActions>
          <Button variant="primary" size="md">
            New deployment
          </Button>
        </EmptyStateActions>
      </EmptyState>
    </div>
  );
}

Use the dashed card when the empty state is the only thing in an unbordered region. Use frame="none" inside anything that already has a border, such as a DataTable, ResourceList, Card or Popover.

Icon

Icons are optional, if the feature does not have a clearly defined Icon, do not include an icon.

Actions

If the feature has a clear create action, use a primary button. If the empty state only contains a link to docs, use outline. If in doubt, just use an outline variant.

Content

Keep descriptions as minimal as possible. No more than two extremely short sentences.