PanelEmpty

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

import { PanelEmpty } from '@basmilius/react-ui';

import { GitPullRequest } from 'lucide-react';
import { Button, PanelEmpty, PanelHeader } from '@basmilius/react-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>
    );
}

A panel is one track of a flex column, so by default the empty state grows into what is left of it (fill="grow"). A card is a box with a height of its own, where growing means nothing; use fill="full" there. sunken gives it the sunken ground, for a box that has no ground behind it yet. header keeps the panel's own header above the sentence, so a person can still act while nothing is listed.

Props

Prop	Type	Default
icon	LucideIcon		Required.
children	ReactNode		Required.
header	ReactNode
spin	boolean	false
action	ReactNode
sunken	boolean	false
fill	'grow' | 'full'	'grow'
className	string
ref	Ref<HTMLDivElement>

PanelEmptyProps is an exported type.