Empty state
A box shown in place of the table when a list is empty or a search returns no results. It tells users why they see nothing and, where possible, suggests the next step.
Basic usage
title is required and should be a short sentence describing the state. Use description to explain in one sentence what can be done.
<acun:empty-state title="No orders yet" description="There are no orders recorded for this store this month." />| Prop | Values |
|---|---|
title | Required state heading |
description | Optional description |
With an icon
The icon slot places a muted icon above the title. Pick a single icon that describes the state and use it with acun:icon at around size="8".
<acun:empty-state title="No documents uploaded" description="The customer's invoices and contract documents are listed here.">
<acun:slot:icon><acun:icon name="folder-open" size="8" stroke="1.5" /></acun:slot:icon>
</acun:empty-state>| Prop | Values |
|---|---|
icon | Slot: icon above the title |
With an action button
The action slot adds a button below the description. Offer a single action that gets the user out of the empty state.
<acun:empty-state title="No records found" description="Try changing your search or filter criteria.">
<acun:slot:icon><acun:icon name="magnifying-glass" size="8" stroke="1.5" /></acun:slot:icon>
<acun:slot:action><acun:button variant="white" size="sm">Clear filters</acun:button></acun:slot:action>
</acun:empty-state>| Prop | Values |
|---|---|
action | Slot: button below the description |
First record and no results
Tell the two cases apart: when there are no records at all, guide the user to create the first one; when a search or filter returns nothing, suggest changing the search. DataTable makes this distinction on its own as well.
<div class="grid gap-4 md:grid-cols-2">
<acun:empty-state title="No products added yet" description="Add the first product to start selling.">
<acun:slot:icon><acun:icon name="cube" size="8" stroke="1.5" /></acun:slot:icon>
<acun:slot:action><acun:button size="sm">New Product</acun:button></acun:slot:action>
</acun:empty-state>
<acun:empty-state title="No results found" description="No products match “headphnes”.">
<acun:slot:icon><acun:icon name="magnifying-glass" size="8" stroke="1.5" /></acun:slot:icon>
<acun:slot:action><acun:button variant="white" size="sm">Clear search</acun:button></acun:slot:action>
</acun:empty-state>
</div>Props and slots
The values the component accepts.
| Prop | Default | Description |
|---|---|---|
title | — | Required. State heading |
description | null | Description below the title |