PanelEmpty

An EmptyState that fills a panel or a card, centered in the room left under the panel's header.

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

import { GitPullRequest } from 'lucide-react';
import { Button, PanelEmpty, PanelHeader } from '@adecore/ui';

export default function PanelEmptyDemo() {
    return (
        <div className="flex h-72 w-80 flex-col rounded-lg border border-border bg-surface">
            <PanelHeader title="Pull requests" />
            <PanelEmpty
                icon={GitPullRequest}
                action={
                    <Button variant="secondary" size="sm">
                        New pull request
                    </Button>
                }
            >
                No open pull requests on this repository.
            </PanelEmpty>
        </div>
    );
}

By default it grows into the rest of a flex column (fill="grow"). In a card with its own height, use fill="full". sunken gives it the sunken ground. header keeps the panel's header above the sentence, so its actions stay reachable.

Props

Prop	Type	Default
children	ReactNode		Required.
header	ReactNode
icon	LucideIcon
busy	boolean	false	A Spinner in place of the icon.
action	ReactNode
sunken	boolean	false
fill	'grow' | 'full'	'grow'
className	string
ref	Ref<HTMLDivElement>

PanelEmptyProps is an exported type.