container · Normal DOM only

EmptyState

Icon + title + description + action — for "no records yet" surfaces.

Use EmptyState whenever a list / table / view is empty. Always include a primary action — "Create your first X" — so the surface is not a dead end.

Install

Pull from the workspace packages (already available if you ran pnpm add):

ts
import { EmptyState } from '@8maverik8/twenty-design';

Examples

No deals

No deals yet
When you start tracking opportunities, they will land here. Get started by creating your first deal.
tsx
<EmptyState icon={<IconInboxOff />} title="No deals yet" description="…" action={<Button>New deal</Button>} />

Guidelines

✓
Include the primary action button.Empty states without a call to action feel like errors.
✕
Reuse the same icon for every empty state in the product.Different content empties for different reasons; visually differentiating helps.