A teaching empty state with icon, explanation, and primary or secondary actions.
InformationalActionable
No invoices
Invoices appear here once a customer is billed.
<EmptyState title="No invoices" description="Invoices appear here once a customer is billed." />Installation
pnpm add @chanrg/4uiImport the stylesheet once, at the root of your app:
import '@chanrg/4ui/styles.css';Usage
import { EmptyState } from '@chanrg/4ui';<EmptyState title="No invoices" description="Invoices appear here once a customer is billed." />API reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | required | What is empty. |
description | string | '' | What the user can do next. |
CSS variables
| Variable | Description |
|---|---|
--4ui-surface | Primary component surface. |
--4ui-text | Primary foreground color. |
--4ui-border | Default control and panel border. |
Accessibility
- Actions remain real caller-provided controls.