> For AI agents: the complete documentation index is available at https://wallarm.github.io/design-system/llms.txt, the full documentation bundle is available at https://wallarm.github.io/design-system/llms-full.txt.

# UtilityPage

The whole-screen state template — 404, 403, 500, offline — for when the app itself cannot render; reach for `EmptyState` when only a region came back empty, and `Banner` or `Alert` when the app still works and this is only a message. It replaces the view and brings its own background and `Logo`, so what you supply is copy and one primary way out, not a layout.

[Source](https://github.com/wallarm/design-system/tree/main/packages/design-system/src/components/UtilityPage) · [Storybook](https://wallarm.github.io/design-system/storybook/?path=/docs/pages-utilitypage--overview)

```tsx
import { Button } from '@wallarm-org/design-system/Button';
import { UtilityPage } from '@wallarm-org/design-system/UtilityPage';

export const Error404 = () => (
  <UtilityPage>
    <Button variant='primary' color='brand' size='large'>
      Take me home
    </Button>
  </UtilityPage>
);
```

## Usage

```tsx
import { Button } from '@wallarm-org/design-system/Button';
import { UtilityPage } from '@wallarm-org/design-system/UtilityPage';
```

## Examples

### Error403

A permission wall rather than a failure: the copy names whose role is short and who can change it, so the reader knows the next move is a person and not a retry.

```tsx
import { Button } from '@wallarm-org/design-system/Button';
import { UtilityPage } from '@wallarm-org/design-system/UtilityPage';

export const Error403 = () => (
  <UtilityPage>
    <Button variant='primary' color='brand' size='large'>
      Take me home
    </Button>
  </UtilityPage>
);
```

### Error500

Ours to fix, said plainly, with the house reassurance that protection keeps running while the console does not. It is also the only story with a second button — one primary way out, at most one secondary.

```tsx
import { Button } from '@wallarm-org/design-system/Button';
import { ArrowRight } from '@wallarm-org/design-system/icons';
import { UtilityPage } from '@wallarm-org/design-system/UtilityPage';

export const Error500 = () => (
  <UtilityPage>
    <Button variant='primary' color='brand' size='large'>
      Take me home
    </Button>
    <Button variant='secondary' color='neutral' size='large'>
      Still broken? Check status <ArrowRight />
    </Button>
  </UtilityPage>
);
```

### Offline

The connection dropped, not the service: 'Try again' is the way out, and the copy promises automatic reconnection so nobody sits watching the button.

```tsx
import { Button } from '@wallarm-org/design-system/Button';
import { UtilityPage } from '@wallarm-org/design-system/UtilityPage';

export const Offline = () => (
  <UtilityPage>
    <Button variant='primary' color='brand' size='large'>
      Try again
    </Button>
  </UtilityPage>
);
```

## Props

| Prop           | Type                                                 | Default | Description |
| -------------- | ---------------------------------------------------- | ------- | ----------- |
| title \*       | `string`                                             |         |             |
| subtitle \*    | `string`                                             |         |             |
| description \* | `string`                                             |         |             |
| defaultChecked | `boolean \| undefined`                               |         |             |
| defaultValue   | `string \| number \| readonly string[] \| undefined` |         |             |
| autoFocus      | `boolean \| undefined`                               |         |             |
| id             | `string \| undefined`                                |         |             |
| tabIndex       | `number \| undefined`                                |         |             |
| rel            | `string \| undefined`                                |         |             |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`        |         |             |
| data-testid    | `string \| undefined`                                |         |             |