Error Page

ErrorPage is the full-screen error: the brand in the top left corner, an illustration beside the message, and the error code in the bottom right corner.

import { ErrorPage, errorPageCopy } from '@beyul/sulmu-ui'

Source · Figma

Examples

errorPageCopy holds the wording from the Figma screens for each code, and the name of the illustration to use.

Tourism Suite

Oops!

Looks like what you’re looking for is missing in space.

It might be hiding, moved, or never existed in the first place. Let’s get you back on track!

Back to Dashboard

404

import { BrandMark, Button, ErrorPage, errorPageCopy } from '@beyul/sulmu-ui'
// `?url` asks Vite for the file's URL. Other bundlers have their own way to import an asset.
import art from '@beyul/sulmu-ui/illustrations/error-404.svg?url'

const copy = errorPageCopy[404]

export default function Example() {
  return (
    <ErrorPage
      // The page fills the viewport by default; the docs preview caps it.
      style={{ minHeight: 520 }}
      brand={
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 14 }}>
          <BrandMark /> Tourism Suite
        </span>
      }
      code="404"
      eyebrow={copy.eyebrow}
      title={copy.title}
      description={copy.description}
      illustration={<img alt="" src={art} />}
      actions={<Button>Back to Dashboard</Button>}
    />
  )
}

Props

Prop	Type	Default	Description
title*	ReactNode	-	Main message, e.g. "Looks like what you're looking for is missing in space."
eyebrow	ReactNode	-	Short line above the title, e.g. "Oops!".
description	ReactNode	-	What happened and what to do next. Line breaks in a string are kept.
illustration	ReactNode	-	The picture on the left: an <img> or inline SVG.
actions	ReactNode	-	Buttons under the text, e.g. <Button>Back to Dashboard</Button>.
code	ReactNode	-	Error code shown in the bottom right corner: "404", "500".
brand	ReactNode	-	Logo in the top left corner, e.g. <BrandMark /> with the product name.

ErrorPage also accepts every main attribute.

errorPageCopy

errorPageCopy[code] has an entry for 400, 401, 403, 404, 408, 500 and 503.

Field	Type	Description
title	string	The main message.
description	string	What happened and what to do next. Contains line breaks, which the page keeps.
illustration	string	File name under @beyul/sulmu-ui/illustrations/.
eyebrow	string	Only on 404: “Oops!”.

The type ErrorPageCode is the union of those codes.

Usage notes

• The page is a <main> with an h1, and it is at least as tall as the viewport.
• There are three illustrations: error-404.svg, error-500.svg and error-503.svg. Codes without their own artwork reuse the closest one.
• How an SVG file is imported depends on the app’s bundler. With Vite, ?url gives its URL.