Empty State

New

A layout component for zero-data views — displayed when a list, table, or search returns no results. Renders a large icon, a heading, an optional description, and an optional slot for action buttons or links.

API Reference

Attribute	Description	Type	Default
`title`	Main heading rendered as `<h3>`	string	`No results found`
`description`	Optional explanatory paragraph rendered below the title	string	`""`
`icon`	Lucide icon name displayed large above the heading	string	`inbox`
`size`	Controls vertical padding of the component	string	`md`
`slot`	Optional slot content — typically a button or link for a primary action	slot	—

size

sm md lg

icon (examples)

inbox search folder-open database file-x alert-circle

Heading hierarchy: the component renders the title inside an <h3> element. Ensure the surrounding page structure provides an appropriate <h1> and <h2> before the empty state so the heading hierarchy is logical for screen reader users navigating by headings.

Icon decoration: the icon is purely decorative and carries no accessible label. Meaningful context is provided by the title and description text instead.

Action slot: when an action button or link is placed in the slot, ensure it has a descriptive label (e.g. "Add your first item") rather than a generic label like "Click here", so the purpose is clear when read out of context.

Examples

Usage


<c-empty-state />

Basic

No results found

<c-empty-state />

With Description

No invoices yet

Once you create your first invoice it will appear here.

<c-empty-state
  title="No invoices yet"
  description="Once you create your first invoice it will appear here."
/>

With Action Button

No team members

Invite colleagues to collaborate on this project.

<c-empty-state
  title="No team members"
  description="Invite colleagues to collaborate on this project."
>
  <c-button color="primary">Invite team member</c-button>
</c-empty-state>

Custom Icon

No results for "quarterly report"

Try adjusting your search term or removing filters.

<c-empty-state
  icon="search"
  title="No results for "quarterly report""
  description="Try adjusting your search term or removing filters."
/>

Inside a Card

Recent transactions

No transactions

Transactions will appear here once activity is recorded.

<div class="card bg-base-100 shadow">
  <div class="card-body">
    <h2 class="card-title">Recent transactions</h2>
    <c-empty-state
      icon="database"
      title="No transactions"
      description="Transactions will appear here once activity is recorded."
      size="sm"
    >
      <c-button color="primary" variant="outlined" size="sm">View all accounts</c-button>
    </c-empty-state>
  </div>
</div>