ErrorPage

An organism to display a 404 Page not found error.

Basic Usage


import { ErrorPage } from '@krakentech/coral-organisms';
import { Typography, Link } from '@krakentech/coral';
 
<ErrorPage>
    <Typography>Sorry, we can&apos;t find that page</Typography>
    <Link href="/">Back to homepage</Link>
</ErrorPage>

404

Sorry, we can’t find that page

Back to homepage

Properties

errorCode


<ErrorPage errorCode={500}>
    <Typography>
        Sorry, there&apos;s been an error loading this page.
    </Typography>
    <Link href="/">Back to homepage</Link>
</ErrorPage>

500

Sorry, there’s been an error loading this page.

Back to homepage

variant

Lets your users spend some quality time in the ballpond. Mostly meant to be used in fullscreen (with contained={false}). → check out the docs 404 page for a fullscreen example.


<ErrorPage variant="ballpond" contained>
    <Container zIndex={1}>
        <Stack flexDirection="column" alignItems="center" justifyContent="center" fullWidth>
            <Typography>
                We couldn&apos;t find what you&apos;re looking for, but it&apos;s probably in here somewhere!
            </Typography>
            <Link href="/">Back to homepage</Link>
        </Stack>
    </Container>
</ErrorPage>

404

We couldn’t find what you’re looking for, but it’s probably in here somewhere!

Back to homepage

It is also possible to load the Ballpond or Cycling variant individually, in order to reduce bundle size by only importing what you need.

Full API

Name	Type	Default
`errorCode`	`string \| number` HTTP-like error code to display	`404`
`variant`	`"cycling" \| "ballpond"` Visual variant	`"default"`
`contained`	`boolean` Contain the 3D canvas to the ErrorPage container, instead of fixed fullscreen. Only applies to `ballpond` variant.	`false`
`children`	`React.ReactNode`