EmptyState

What a list, a canvas or a thread shows before it holds anything: one icon, one sentence, and at most one button.

import { EmptyState } from '@adecore/ui';

import { Inbox } from 'lucide-react';
import { Button, EmptyState } from '@adecore/ui';

export default function EmptyStateDemo() {
    return (
        <div className="grid w-full max-w-xl grid-cols-2 gap-4">
            <EmptyState
                icon={Inbox}
                action={
                    <Button variant="secondary" size="sm">
                        Create a task
                    </Button>
                }
                className="rounded-lg border border-border bg-surface"
            >
                No tasks yet. A task you create shows up here.
            </EmptyState>
            <EmptyState busy title="Indexing" className="rounded-lg border border-border bg-surface">
                Reading 1,204 files. Search works once this is done.
            </EmptyState>
        </div>
    );
}

The sentence says what is missing and what puts something there. A title is for an outcome, such as a search with no results. The icon is a Lucide icon or another mark that takes a size, drawn at 20 pixels. busy draws a Spinner in its place.

Props

Prop	Type	Default
children	ReactNode		Required. One sentence.
icon	LucideIcon | ReactElement<{ size?: number }>
busy	boolean	false	A Spinner in place of the icon, for a state that is still loading.
title	ReactNode
action	ReactNode		One button.
className	string
ref	Ref<HTMLDivElement>

EmptyStateProps is an exported type.