feedback / stable

EmptyState

Empty result: icon + one line + optional action for lists, boards and search.

LIVE PREVIEW

Loading preview…

When to use

A list, board, filter or search returned zero items.
A first-run surface that needs a clear next step.

Consider an alternative

Loading — use Skeleton and the top progress bar.
Errors — use an AlertDialog or an inline error, not an empty state.

Import

import { EmptyState } from '@revido-llc/kit';

Props

Props documented by the Kit. Refer to the TypeScript types for the complete interface, including inherited props.


icon (required)	LucideIcon \| "bell" \| "check" \| "chevron-down" \| "chevron-left" \| "chevron-right" \| "chevron-up" \| "circle-help" \| "clipboard" \| "file-text" \| "flag" \| "fold…	—	Leading Lucide icon in a muted circle.
title (required)	ReactNode	—	Short headline (one line).
actionDisabledReason	string	—
actionLabel	string	—	Label for the optional primary action. Requires `onAction`.
actionVariant	"primary" \| "secondary" \| "outline" \| "ghost" \| "danger" \| "link"	"primary"	Quiet secondary actions suit record sections; pages default to primary.
density	EmptyStateDensity	"default"	`inline` is a muted rail line without an icon; `compact` stacks a size-9 tile, title and button with py-4; `default` is page-sized. RecordSection chooses from placement.
description	ReactNode	—	One supporting sentence.
isActionDisabled	boolean	false	Disabled actions remain focusable so their explanation can be read.
onAction	(() => void)	—	Called when the action button is pressed.
children	ReactNode	—
className	string	—

Examples

Literal icon

A registered icon name and literal text compose without application callbacks.

<EmptyState icon="folder-open" title="No projects" description="Start a project to organise modules, features and tasks." />

Collapsed empty default

RecordSection owns disclosure and chooses the compact body automatically; the empty state starts hidden.

<RecordSection title="Bugs" count={0} addAction={{ label: "Add bug", onPress: addBug }}>{null}</RecordSection>

With action

Icon + title + one sentence + primary action.

<EmptyState
  icon={FolderOpen}
  title="No projects"
  description="Start a project to organise modules, features and tasks."
  actionLabel="New project"
  onAction={createProject}
/>

Record section with action

Main section: centered icon tile, sentence-case title and secondary sm action with tight padding.

<EmptyState icon={Inbox} title="No attachments yet" density="compact" actionLabel="Add attachment" actionVariant="secondary" onAction={addAttachment} />

Expanded empty rail

Rail section: one muted line without the icon tile or a duplicate add action.

<EmptyState
  icon={Search}
  title="No matches"
  description="Try a different search or clear filters."
  density="inline"
/>