# Recovery

Loading, unavailable and missing-page states with recovery actions.

- Group: Website
- Import: `import { RecoveryState } from '@misoto22/folio/website'`
- Page: https://ui.misoto22.com/components/recovery/

## When to reach for it

Explain the current state and provide a real next action.

## 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.

## RecoveryState

A recovery page composed from the system error primitive and caller-owned destinations.

### Props

- `elsewhere` — `ReactNode`.

Also accepts: `ErrorStateProps`.

## RecoveryLinks

Suggested destinations, with routing supplied by the host.

### Props

- `label` (required) — `string`.
- `items` (required) — `{ id: string; link: ReactElement }[]`.

## LoadingRouteIntro

The shared masthead geometry, drawn from the core loading primitives.

### Props

- `titleClassName` — `string` default `'w-[min(100%,18rem)]'`.

## LoadingRecords

A collection skeleton with or without a media column.

### Props

- `rows` — `number` default `4`.
- `media` — `boolean` default `true`.

## WebsiteLoading

Named loading layouts for the website's reusable page shapes.

### Props

- `label` (required) — `string`.
- `layout` — `'records' | 'gallery' | 'media' | 'metrics' | 'identity'` default `'records'`.
- `filters` — `boolean` default `false`.
- `rows` — `number` default `4`.
- `media` — `boolean` default `true`.
- `titleClassName` — `string`.

## Example — missing record

```tsx
import { Button } from '@misoto22/folio'
import { RecoveryLinks, RecoveryState } from '@misoto22/folio/website'

<RecoveryState code="404" heading="This record is unavailable" message="The entry may have moved or been removed." level={2}
  action={<Button asChild><a href="#library">Return to the library</a></Button>}
  elsewhere={<RecoveryLinks label="You can also explore" items={[
    { id: 'essays', link: <a href="#essays">Recent essays</a> },
    { id: 'projects', link: <a href="#projects">Selected projects</a> },
  ]} />}
/>
```