Empty State

Install

Pull Empty State from the barrel for everyday use, or the granular path when you want a tighter bundle.

import { EmptyState } from "@brika/clay";

import { EmptyState } from "@brika/clay/components/empty-state";

A minimal example

Drop this into a page. Native HTML attributes pass through to the underlying primitive.

import { Button } from '@brika/clay/components/button';
import {
  EmptyState,
  EmptyStateActions,
  EmptyStateDescription,
  EmptyStateIcon,
  EmptyStateTitle,
} from '@brika/clay/components/empty-state';
import { Inbox } from 'lucide-react';

/** Inbox-zero placeholder, icon, title, description, and optional action. */
export default function EmptyStateDefaultDemo() {
  return (
    <EmptyState className="w-full max-w-md">
      <EmptyStateIcon>
        <Inbox />
      </EmptyStateIcon>
      <EmptyStateTitle>No messages yet</EmptyStateTitle>
      <EmptyStateDescription>
        You are all caught up. New messages will appear here.
      </EmptyStateDescription>
      <EmptyStateActions>
        <Button variant="outline">Refresh</Button>
      </EmptyStateActions>
    </EmptyState>
  );
}

Empty State, every way

import {
  EmptyState,
  EmptyStateDescription,
  EmptyStateTitle,
} from '@brika/clay/components/empty-state';
/** Minimal empty state, title and description only, no icon or actions. */
export default function EmptyStateSimpleDemo() {
  return (
    <EmptyState className="w-full max-w-md py-10">
      <EmptyStateTitle>No activity yet</EmptyStateTitle>
      <EmptyStateDescription>
        Actions and events will be logged here once work begins.
      </EmptyStateDescription>
    </EmptyState>
  );
}

import { Button } from '@brika/clay/components/button';
import {
  EmptyState,
  EmptyStateActions,
  EmptyStateDescription,
  EmptyStateIcon,
  EmptyStateTitle,
} from '@brika/clay/components/empty-state';
import { Search } from 'lucide-react';

/** Search-results placeholder, combine with a clear-search action to guide the user. */
export default function EmptyStateWithActionDemo() {
  return (
    <EmptyState className="w-full max-w-md">
      <EmptyStateIcon>
        <Search />
      </EmptyStateIcon>
      <EmptyStateTitle>No results for "clay design system"</EmptyStateTitle>
      <EmptyStateDescription>
        Try adjusting your search terms or removing active filters.
      </EmptyStateDescription>
      <EmptyStateActions>
        <Button>Clear search</Button>
        <Button variant="outline">Browse all</Button>
      </EmptyStateActions>
    </EmptyState>
  );
}

Accessibility

• › Icon inside EmptyStateIcon is aria-hidden, title and description carry all meaning.
• › Action buttons should have descriptive labels matching the specific task ("Clear search", not "Clear").
• › Empty states announced as a live region can help AT users know when a list becomes empty dynamically.

Theme tokens

Every CSS variable Empty State reads, with its default and the dotted path you'd write in a ThemeConfig JSON to override it. Set any of these in your theme to retune Empty State without touching component code.

Override in a theme

Authoring a theme is plain JSON. Drop overrides under components.emptyState, the names are camelCase versions of the variable suffix.

{
  "id": "my-theme",
  "name": "My Theme",
  "description": "...",
  "accentSwatches": ["#000"],

  "components": {
    "emptyState": {
      "iconBg": "color-mix(in oklch, var(--muted) 50%, transparent)"
    }
  }
}

Then apply with applyTheme(myTheme) (see the theming guide), scope it to a subtree with themeToCssVars(myTheme, mode), or consume any token directly in your own JSX with the matching Tailwind utility (e.g. bg-empty-state-…) — see the chips on each token row.

API reference

Props specific to Empty State. Native HTML attributes pass through to the underlying primitive, see the component source on GitHub for the full type signature.