EmptyState

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

Filtered Table Empty State

View 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 EmptyStateIcon so they stay hidden from assistive technology.