State
StateError
Error state display with alert icon, message, and optional retry button.
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
<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. |
AI Context
component: XAStateError
package: "@xenterprises/nuxt-x-app"
category: State
use-when: >
Use XAStateError when a data fetch or action fails. Pass retryable=true
to let users retry. Preferred over inline ad-hoc error markup.