Empty state

A quiet empty surface that explains the context and gives the user a clear next action.

New

Reference collections

Create your first collection

Keep related patterns, guidance and source notes together.

Implementation

1import type { HTMLAttributes, ReactNode } from "react";2 3export type EmptyStateProps = Omit<HTMLAttributes<HTMLDivElement>, "title"> & {4  title: string;5  description?: string;6  icon?: ReactNode;7};8 9/** A contextual empty state whose consumer supplies the recovery actions. */10export function EmptyState({11  title,12  description,13  icon,14  children,15  className = "",16  ...divProps17}: EmptyStateProps) {18  return (19    <div {...divProps} className={`empty-state ${className}`}>20      {icon && (21        <span className="empty-state-icon" aria-hidden="true">22          {icon}23        </span>24      )}25      <h3>{title}</h3>26      {description && <p>{description}</p>}27      {children && <div className="empty-state-actions">{children}</div>}28    </div>