# Not found

> The 404 page body; a status line, heading, description and a way back, centred, left-aligned or beside media.

URL: https://apogee.avaui.dev/docs/sections/not-found
Last updated: 2026-10-15

The 404 page body; a status line, heading, description and a way back, centred, left-aligned or beside media.

Last updated October 15, 2026

```astro
<NotFound />
<NotFound code="500" heading="Something broke" description="…" primaryAction={{ label: 'Try again', href: '/' }} secondaryAction={{ label: 'Status page', href: '#' }} />
```

Whole pages built on it: [404 pages](https://apogee.avaui.dev/docs/not-found-pages).

## Add

```sh
npx @ava-ui/apogee add not-found
```

## API

| Prop | Type | Default | Category | Description |
| --- | --- | --- | --- | --- |
| `code` | `string` | `'404'` | content |  |
| `heading` | `string` | `'Page not found'` | content |  |
| `description` | `string` | a default line | content |  |
| `primaryAction` | `{ label, href }` | Go home → `/` | content |  |
| `secondaryAction` | `{ label, href }` | — | content |  |
| `back` | `string` | — | content | Label of a “Go back” button that returns to the previous page; hidden without JS. |
| `layout` | `'centered' \| 'start' \| 'split'` | `'centered'` | layout | `split` puts the `media` slot beside the text from `lg`, under it on phones. |
| `codeStyle` | `'text' \| 'badge'` | `'text'` | layout | The status line as small text or a badge. An empty `code` hides it. |
| `watermark` | `boolean` | `false` | layout | The code, huge and faint, behind the text from `md`. |
| `fullHeight` | `boolean` | `false` | layout | Fill the viewport height and centre the content. |
| `background`, `spacing`, `headingLevel`, `id` |  | `headingLevel` is `1` | layout | As on every section. |

## Slots

| Slot | What goes in it |
| --- | --- |
| `icon` | Above the status line: a FeaturedIcon. |
| default | Under the buttons: a site search, a list of help links. |
| `below` | Full width under the text: a row of cards. |
| `media` | Beside the text in `split`: a photo, an illustration, a product screen. |

## Accessibility

-   The heading is the page’s `h1` by default; the code is a plain paragraph so screen readers hear the heading first.
-   “Go back” is a button with a tiny script. Without JS it hides, and the primary action still links home.