EmptyState

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

Installation

npm install @crisp-ui-kit/crisp

Props

Illustrated

Pass variant="illustrated" for a large icon on a dotted-grid backdrop — a "nothing here" state for empty developer or report panels. 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>}
/>;

Examples

Records (zero-records state)

Pass variant="records" for Attio's zero-records state — nothing imported yet (measured on the Users and Workspaces objects, which show nothing else): a 138px dotted-grid icon tile, two CTAs (action accepts more than one — they lay out in a measured 8px-gap row), and a learnMore card. Seen live in RecordsTable via its emptyStateExtra prop.

Page (full-view)

Pass variant="page" for a full-view empty state — a 45px ringed-circle icon, a 20px heading, a muted body, and a primary recovery action. Use <Button size="field"> for that action: Attio's Clear Filter button is 32px high with 9px corners and 8px 10px side padding (measured 112x32), a size sm (24px) and md (28px) do not reach. 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).