Website
Recovery
Loading, unavailable and missing-page states with recovery actions.
Usage
When to reach for it
Explain the current state and provide a real next action.
Ships from@misoto22/folio/website
import { RecoveryState } from '@misoto22/folio/website'Notes
A recovery page composed from the system error primitive and caller-owned destinations.
Best practices
Do
- Supply localized labels, descriptive links and meaningful image alternatives.
Don’t
- Do not put service credentials, routing logic or backend models inside presentation components.
Examples
missing record
A missing record explains the state and offers concrete destinations. Recovery links are supplied by the host so they can use any router.
Parts
Composed at the call site rather than configured through props, so a layout this component did not anticipate is still expressible.
RecoveryLinks
Suggested destinations, with routing supplied by the host.
| Prop | Type | Default | Description |
|---|---|---|---|
| itemsrequired | { id: string; link: ReactElement }[] | — | |
| labelrequired | string | — |
LoadingRouteIntro
The shared masthead geometry, drawn from the core loading primitives.
| Prop | Type | Default | Description |
|---|---|---|---|
| titleClassName | string | 'w-[min(100%,18rem)]' | — |
LoadingRecords
A collection skeleton with or without a media column.
| Prop | Type | Default | Description |
|---|---|---|---|
| media | boolean | true | — |
| rows | number | 4 | — |
WebsiteLoading
Named loading layouts for the website's reusable page shapes.
| Prop | Type | Default | Description |
|---|---|---|---|
| labelrequired | string | — | |
| filters | boolean | false | — |
| layout | 'records' | 'gallery' | 'media' | 'metrics' | 'identity' | 'records' | — |
| media | boolean | true | — |
| rows | number | 4 | — |
| titleClassName | string | — |