Not found
The 404 page body; a status line, heading, description and a way back, centred, left-aligned or beside media.
Last updated
Show codeHide code
<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.
Add
npx @ava-ui/apogee add not-foundAPI
| 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
h1by 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.