Cajón Design System
Components

EmptyState

Token-driven empty state card for no-data, no-results, onboarding, and error flows.

Pattern

The baseline non-premium pattern is a compact centered card with an icon badge, title, short supporting text, and a single clear action.

Usage

import { Button, EmptyState } from '@cajon-ui/react';

<EmptyState
  icon={<DocumentIcon />}
  heading="No documents yet"
  description="Create your first document to get started."
  action={<Button size="sm">New document</Button>}
/>

Props

PropTypeDefaultNotes
iconReactNodeLeading visual
headingReactNodeRequired heading
descriptionReactNodeSupporting copy
actionReactNodeCTA area
toneprimary | neutral | success | error | warning | infoprimaryIcon badge treatment

On this page