Empty State

Overview

Empty State is a design-system component intended for reusable, product-agnostic UI composition.

Import


import { EmptyState, EmptyStateIcon, EmptyStateTitle, EmptyStateDescription, EmptyStateActions, emptyStateVariants } from "@tesseract-nexus/tesserix-ui"

Exports


export {
  EmptyState,
  EmptyStateIcon,
  EmptyStateTitle,
  EmptyStateDescription,
  EmptyStateActions,
  emptyStateVariants,
} from "./empty-state"
export type { EmptyStateProps } from "./empty-state"

Props


export interface EmptyStateProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof emptyStateVariants> {}
 
const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(({ className, size, ...props }, ref) => (
  <div ref={ref} className={cn(emptyStateVariants({ size }), className)} {...props} />
))
EmptyState.displayName = "EmptyState"
 
const EmptyStateIcon = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      className={cn(
        "flex h-12 w-12 items-center justify-center rounded-xl bg-muted text-muted-foreground",
        className
      )}
      {...props}
    />
  )
)
EmptyStateIcon.displayName = "EmptyStateIcon"
 
const EmptyStateTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
  ({ className, ...props }, ref) => (
    <h3 ref={ref} className={cn("text-lg font-semibold text-card-foreground", className)} {...props} />
  )
)
EmptyStateTitle.displayName = "EmptyStateTitle"
 
const EmptyStateDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
  ({ className, ...props }, ref) => (
    <p ref={ref} className={cn("max-w-md text-sm text-muted-foreground", className)} {...props} />
  )
)
EmptyStateDescription.displayName = "EmptyStateDescription"
 
const EmptyStateActions = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div ref={ref} className={cn("mt-2 flex flex-wrap items-center justify-center gap-2", className)} {...props} />
  )
)
EmptyStateActions.displayName = "EmptyStateActions"
 
export {
  EmptyState,
  EmptyStateIcon,
  EmptyStateTitle,
  EmptyStateDescription,
  EmptyStateActions,
  emptyStateVariants,
}

Variations


const emptyStateVariants = cva(
  "flex w-full flex-col items-center justify-center rounded-2xl border border-dashed bg-card text-center",
  {
    variants: {
      size: {
        sm: "gap-2 p-6",
        md: "gap-3 p-8",
        lg: "gap-4 p-10",
      },
    },
    defaultVariants: {

Usage Patterns

Basic


import { EmptyState, EmptyStateIcon, EmptyStateTitle, EmptyStateDescription, EmptyStateActions, emptyStateVariants } from "@tesseract-nexus/tesserix-ui"
 
export function Example() {
  return <EmptyState />
}

Do / Don’t

Do


// Compose with domain wrappers in product code
<EmptyState className="w-full" />

Don’t


// Avoid one-off hardcoded values that bypass tokens
<EmptyState className="bg-[#123456] text-[#fafafa] px-[13px]" />

Token / Theming Mapping

Color tokens: —primary, —secondary, —muted, —destructive, —foreground, —background
Shape tokens: —radius
Border/input tokens: —border, —input, —ring
Spacing and typography: Tailwind scale via design-system preset

Interaction Test Checklist

Interaction: click/keyboard activation for primary paths.
Focus: visible focus styles and logical tab order.
Variants: core variants and sizes render correctly.
Disabled/error states: behavior and ARIA attributes are correct.
Regression: Storybook visual check for primary states.

Accessibility

Verify keyboard behavior for all interactive states.
Ensure labels and semantic roles are present in consuming screens.
Validate focus treatment and screen-reader output during QA.