Empty State

1"use client";
2 
3import type * as React from "react";
4import { cn } from "@/lib/utils";
5 
6export type EmptyStateTitleElement =
7  | "h1"
8  | "h2"
9  | "h3"
10  | "h4"
11  | "h5"
12  | "h6"
13  | "p";
14 
15export interface EmptyStateProps
16  extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
17  title: React.ReactNode;
18  /** Semantic element for the visible title. Use `p` when it should not create a document section. */
19  titleAs?: EmptyStateTitleElement;
20  description?: React.ReactNode;
21  icon?: React.ReactNode;
22  /** Primary CTA, typically a `<Button>`. */
23  action?: React.ReactNode;
24  /** Additional slots rendered below the primary action. */
25  children?: React.ReactNode;
26}
27 
28/** EmptyState: "no results" / "no data yet" placeholder. */
29export function EmptyState({
30  title,
31  titleAs: Title = "h3",
32  description,
33  icon,
34  action,
35  children,
36  className,
37  ...props
38}: EmptyStateProps): React.ReactElement {
39  return (
40    <div
41      data-slot="empty-state"
42      className={cn(
43        "flex flex-col items-center justify-center px-6 py-14 text-center",
44        className,
45      )}
46      {...props}
47    >
48      {icon && (
49        <div
50          aria-hidden
51          className="mb-3 flex items-center justify-center text-ink-muted [&_svg]:size-8"
52          data-slot="empty-state-icon"
53        >
54          {icon}
55        </div>
56      )}
57      <Title
58        className="text-regular text-ink-muted"
59        data-slot="empty-state-title"
60      >
61        {title}
62      </Title>
63      {description && (
64        <p
65          className="mt-1.5 max-w-md text-small text-ink-subtle"
66          data-slot="empty-state-description"
67        >
68          {description}
69        </p>
70      )}
71      {action && (
72        <div className="mt-6" data-slot="empty-state-action">
73          {action}
74        </div>
75      )}
76      {children && (
77        <div className="mt-6 flex flex-col items-center gap-2 w-full" data-slot="empty-state-extras">
78          {children}
79        </div>
80      )}
81    </div>
82  );
83}