EmptyState
Explains an empty table, filtered view, or first-use screen and gives users a clear next step.
Default
A centered message for a view with no records or results.
No results found
Try changing your filters or searching for another term.
tsx
<EmptyState
icon={<Search />}
title="No results found"
description="Try changing your filters or searching for another term."
actions={<Button size="sm">Clear filters</Button>}
/>Installation
tsx
import { EmptyState } from "madagent";Sizes
Use sm inside tables and compact panels, or md for full-page states.
No invoices
Invoices will appear here.
No invoices
Create your first invoice to begin tracking payments.
tsx
<EmptyState size="sm" title="No invoices" />
<EmptyState size="md" title="No invoices" />Multiple actions
Compose Buttons or a ButtonGroup in the actions slot.
No matching records
Reset the current filters or create a new record.
tsx
<EmptyState
title="No matching records"
actions={<><Button variant="outline">Reset</Button><Button>New record</Button></>}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
title* | ReactNode | - | Primary empty-state message |
description | ReactNode | - | Supporting guidance below the title |
icon | ReactNode | - | Decorative icon above the title |
actions | ReactNode | - | Buttons or a ButtonGroup for next steps |
size | "sm""md" | "md" | Compact table or full-page spacing |
RTL Support
Components automatically adapt to right-to-left languages using CSS logical properties.
Preview
لا توجد نتائج
جرّب تغيير عوامل التصفية أو البحث عن عبارة أخرى.
Usage
tsx
<EmptyState
icon={<Search />}
title="لا توجد نتائج"
description="جرّب تغيير عوامل التصفية."
actions={<Button>مسح عوامل التصفية</Button>}
/>