State
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. |
<XAStateError />
Displays a centered error state with a red triangle alert icon, title, optional description, and a "Try again" button when the error is retryable. Uses role="alert" for accessibility.
<XAStateError
title="Failed to load users"
description="Check your connection and try again."
:retryable="true"
@retry="fetchUsers"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | String | 'Something went wrong' | Error heading text. |
description | String | '' | Optional detail text below the title. |
retryable | Boolean | true | When true, renders a "Try again" button that emits retry. |
Events
| Event | Description |
|---|---|
retry | Emitted when the user clicks the retry button. |
<XAStateLoading />
A multi-variant loading component that adapts its skeleton or spinner to the type of content being loaded. All variants include role="status" and aria-live="polite".
<!-- Default spinner with message -->
<XAStateLoading message="Loading users..." size="md" />
<!-- Row skeletons for list content -->
<XAStateLoading variant="rows" :rows="5" />
<!-- Table skeleton -->
<XAStateLoading variant="table" :rows="8" />
<!-- Form skeleton -->
<XAStateLoading variant="form" />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | String | 'spinner' | Loading style — 'spinner', 'rows', 'card', 'form', or 'table'. |
rows | Number | 3 | Number of skeleton rows for rows and table variants. |
message | String | '' | Optional message shown below the spinner (spinner variant only). |
size | String | 'md' | Spinner size — affects spinner dimensions and message font size. |
AI Context
category: State
package: "@xenterprises/nuxt-x-app"
use-when: >
Use XAStateEmpty when a data list or section has no items to show. Use XAStateError
when a data fetch or action fails, passing retryable=true to let users retry. Use
XAStateLoading while async data is in flight, choosing the variant that matches
the shape of the content being loaded (rows for lists, table for tables, form for
forms, spinner for generic waits). These three components cover all standard async
lifecycle states and should be preferred over inline ad-hoc markup.