Patterns
Page State
Centered loading, error, and empty placeholders for page lifecycles.
Three centered, full-section placeholders for the common page lifecycles: loading, error, and empty. They share consistent spacing and typography so a page can swap between them cleanly while data resolves.
Import
import { PageLoadingState, PageErrorState, PageEmptyState } from "@yuhuanowo/yunui/patterns";
PageLoadingState
A centered spinner with an optional message.
PageLoadingState
Loading...
Loading your data…PageErrorState
A centered error message with an optional retry link (shown when onRetry is provided).
PageErrorState
Failed to load data.
PageEmptyState
A centered empty state with a title, optional description, an optional leading icon component, and an action slot for a button.
PageEmptyState
No projects yet
Create your first project to get started.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| message | string | — | Optional text shown beside the spinner. |
| Prop | Type | Default | Description |
|---|---|---|---|
| message* | string | — | Error message to display. |
| onRetry | (() => void) | — | When provided, shows a retry link that calls this. |
| retryLabel | string | Retry | Label for the retry link. |
| Prop | Type | Default | Description |
|---|---|---|---|
| action | ReactNode | — | Action slot (e.g. a button) below the text. |
| description | string | — | Supporting text below the title. |
| icon | ElementType | — | Optional icon component shown above the title. |
| title* | string | — | Heading text. |