ComponentsData Display
EmptyState
Empty table and list state with title, description, icon, and recovery actions
The EmptyState component gives admin screens a consistent recovery moment when a table, report, or filtered list has no rows.
Import
import {
EmptyState,
EmptyStateActions,
EmptyStateDescription,
EmptyStateIcon,
EmptyStateTitle,
} from '@nim-ui/components';Basic Usage
No orders found
Adjust filters or create the first order for this warehouse.
Code
<EmptyState aria-label="No orders found">
<EmptyStateIcon>
<span className="text-sm font-semibold">0</span>
</EmptyStateIcon>
<EmptyStateTitle>No orders found</EmptyStateTitle>
<EmptyStateDescription>Adjust filters or create the first order for this warehouse.</EmptyStateDescription>
<EmptyStateActions aria-label="Empty orders actions">
<Button variant="outline" size="sm">Clear filters</Button>
<Button variant="primary" size="sm">Create order</Button>
</EmptyStateActions>
</EmptyState>Props
EmptyState
| Name | Type | Default | Description |
|---|---|---|---|
aria-label | string | - | Accessible label for the empty status region. |
className | string | - | Additional classes for spacing, size, or alignment. |
children* | ReactNode | - | Empty state content, usually icon, title, description, and actions. |
Backoffice Guidance
- State what is empty, not that something went wrong.
- Put one recovery action first: clear filters, import data, or create an item.
- Keep decorative icons in
EmptyStateIconso they stay hidden from assistive technology.