Empty State

Placeholder for empty content regions.

stable

Preview

No messages

When you receive messages they will appear here.

Code

tsx

import { Inbox } from "lucide-react";
import { Button } from "@/components/ui/button";
import { EmptyState } from "@/components/ui/empty-state";

export function Example() {
  return (
    <EmptyState
      icon={<Inbox className="h-6 w-6" />}
      title="No messages"
      description="When you receive messages they will appear here."
      action={<Button size="sm">Compose</Button>}
    />
  );
}

Props

Prop	Type	Default	Description
className	`string`	—	Additional Tailwind classes, merged with the component's defaults via `cn()`.

Sub-components

EmptyStateIcon— Large icon at the top.

EmptyStateTitle— Headline.

EmptyStateDescription— Supporting text.

EmptyStateActions— Row of CTAs below the text.

Placeholder for empty data regions. Compose with a primary CTA when actionable.

All components also accept standard HTML attributes for their root element (e.g. `id`, `aria-*`, `data-*`, event handlers) and forward `ref` where applicable.

Source

The full implementation of components/ui/empty-state.tsx is below — copy it into your project and own it. Some components import the cn helper from lib/utils or other primitives; copy those too.

tsx

import { cn } from "@/lib/utils";
import { type HTMLAttributes, type ReactNode, forwardRef } from "react";

export interface EmptyStateProps extends HTMLAttributes<HTMLDivElement> {
  icon?: ReactNode;
  title: string;
  description?: string;
  action?: ReactNode;
}

export const EmptyState = forwardRef<HTMLDivElement, EmptyStateProps>(
  ({ className, icon, title, description, action, ...props }, ref) => (
    <div
      ref={ref}
      className={cn("flex flex-col items-center justify-center py-12 text-center", className)}
      {...props}
    >
      {icon && (
        <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-bg-muted text-fg-muted">
          {icon}
        </div>
      )}
      <p className="text-sm font-semibold text-fg">{title}</p>
      {description && <p className="mt-1 max-w-xs text-sm text-fg-muted">{description}</p>}
      {action && <div className="mt-4">{action}</div>}
    </div>
  ),
);
EmptyState.displayName = "EmptyState";

JavaFX

Ships in the PRIZM JavaFX library for thick-client C3 apps as PrizmEmptyState (extends VBox). Run the gallery to see it natively.

java

import design.prizm.fx.controls.PrizmEmptyState;

PrizmEmptyState()
PrizmEmptyState(String titleText)

Prop	Type	Default	Description
setTitle	`(String) → void`	—	Set the title text.
setDescription	`(String) → void`	—	Optional supporting text; null or "" hides it.
setIcon	`(Node) → void`	—	Optional icon shown in a muted circle. Pass null to remove.
setAction	`(Node) → void`	—	Optional action below the text (e.g. a PrizmButton). Pass null to remove.

A centred composite over VBox (no stock 1:1 control), styled by the .prizm-empty-state rules. Mirrors components/ui/empty-state.tsx.