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 '@basmilius/react-ui';

import { Inbox, LoaderCircle } from 'lucide-react';
import { Button, EmptyState } from '@basmilius/react-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 icon={LoaderCircle} spin 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 above it is for a state that is an outcome, such as a search with no results, rather than a list with nothing in it yet. The icon is always 20 pixels. It can be a Lucide icon, or another mark that takes a size, such as a logo.

Props

Prop	Type	Default
children	ReactNode		Required. One sentence.
icon	LucideIcon | ReactElement<{ size?: number }>
spin	boolean	false	Turns a Lucide icon, for a state that is still loading.
title	ReactNode
action	ReactNode		One button.
className	string
ref	Ref<HTMLDivElement>

EmptyStateProps is an exported type.