State
StateEmpty
Empty state display with icon, title, description, and optional action slot.
State
The State category provides three building-block components for communicating asynchronous UI states: empty data sets, error conditions, and loading progress. Using these consistently instead of ad-hoc inline markup keeps feedback patterns uniform throughout the application.
Components
<XAStateEmpty />
Displays a centered illustration-style empty state with an icon, title, optional description, and an optional action slot (e.g. a CTA button). Uses role="status" for accessibility.
<XAStateEmpty
icon="i-lucide-folder-open"
title="No documents found"
description="Create a document to get started."
>
<template #action>
<UButton @click="createDocument">New Document</UButton>
</template>
</XAStateEmpty>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
icon | String | 'i-lucide-inbox' | Lucide icon name shown inside the icon circle. |
title | String | 'No data' | Primary heading text. |
description | String | '' | Optional supporting text below the title. |
Slots
| Slot | Description |
|---|---|
action | Optional CTA area rendered below the description. |
AI Context
component: XAStateEmpty
package: "@xenterprises/nuxt-x-app"
category: State
use-when: >
Use XAStateEmpty when a data list or section has no items to show.
Preferred over inline ad-hoc empty state markup.