EmptyState

The "nothing here yet" panel: a centred icon, title, description, and optional action — for empty tables, tabs, and no-results states.

Preview

Illustrated

Pass variant="illustrated" for a large icon on a dotted-grid backdrop — Attio's Developers / Reports "nothing here" state. Seen live in the Developers tab of the SettingsShell demo.

<EmptyState
  variant="illustrated"
  icon={<KeyRound size={40} strokeWidth={1.25} />}
  title="No access token"
  description="You don't have any access token yet."
  action={<Button intent="primary" size="sm">Create access token</Button>}
/>;

Page (full-view)

Pass variant="page" for Attio's full-view empty state — a 45px ringed-circle icon, a 20px heading, a muted body, and a primary recovery action. Measured from a records list filtered to zero rows; it's what RecordsTable shows when no rows match (delete or filter the preview table's rows to see it live).

<EmptyState
  variant="page"
  icon={<ListFilter size={18} strokeWidth={1.75} />}
  title="No records match that filter"
  description="None of your records match the filters that are set."
  action={<Button intent="primary" size="sm">Clear filter</Button>}
/>;