Empty State
A fully accessible, token-driven EmptyState component built with strict WAI-ARIA compliance.
tsx
import { EmptyState } from '@nofinite/nui';Interactive Preview
No documents found
Get started by creating your first document in this workspace.
Usage
Basic Example
tsx
import { EmptyState } from '@nofinite/nui';
<EmptyState />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
icon | ReactNode | — | The icon or illustration to display at the top of the empty state. |
title* | string | — | The main title describing the empty state. |
description | ReactNode | — | The descriptive text explaining what is missing or how to resolve it. |
actions | ReactNode | — | Call to action buttons or links. |
Accessibility & Guidelines
- Semantic Tokens: Built strictly using Nuicss semantic tokens (
bg-surface,text-default,border-subtle,bg-primary). - Keyboard Navigation: Adheres to strict WAI-ARIA standards.
- Screen Reader Support: Includes semantic roles and live regions where appropriate.