A generic centered placeholder for empty lists, grids, or search results: an optional icon, a description, and an optional action. Modeled on AntD's `Empty` — reusable anywhere something has nothing to show yet.
A generic centered placeholder for empty lists, grids, or search results: an optional icon, a description, and an optional action. Modeled on AntD's Empty — reusable anywhere something has nothing to show yet.
Usage
1import { EmptyState } from "@behivetech/molecules.empty-state";2import { Button } from "@behivetech/atoms.button";34function Example() {5 const onAdd = () => alert("add a block");6 return (7 <EmptyState icon="🧩" description="No blocks yet. Add one to get started.">8 <Button onClick={onAdd}>+ Add Block</Button>9 </EmptyState>10 );11}
Examples
Open all 3 →Basic Empty State
1const BasicEmptyState = () => (2 <EmptyState description="No blocks yet." />3);45render(<BasicEmptyState />);
Empty State With Icon
1const EmptyStateWithIcon = () => (2 <EmptyState icon="🧩" description="No blocks yet. Add one to get started." />3);45render(<EmptyStateWithIcon />);
Properties
EmptyState props
| Prop | Type | Default | Description |
|---|---|---|---|
description* | ReactNode | — | Message explaining the empty state |
children | ReactNode | — | Action content rendered below the description (typically a Button) |
className | string | — | Additional class names to merge with the component root element |
icon | ReactNode | — | Icon or illustration shown above the description |
Also accepts the native attributes of its root element (className, aria-*, event handlers, …).