#GlobalError (404)

#Import

import { GlobalError } from '@dnb/eufemia'

#Description

The GlobalError is a simple component to integrate when a 404 or 500 has to be shown.

This page component is responsive and should be used as a client wide (fullscreen) component.

#Heading level

The GlobalError component uses the Heading component for its title. By default it renders as an h1, but it automatically respects the surrounding Heading.Level context. This means you can place it inside a Heading.Level to avoid duplicate h1 elements on your page:

<Heading.Level reset={1}>
  <Heading>Page Title</Heading>
  {/* GlobalError title will render as h2 */}
  <GlobalError statusCode="500" />
</Heading.Level>

You may also take a look at how it behaves once 404 or 500 is used in an application.

#Relevant links

• Figma
• Source code
• Docs code

#Related components

GlobalError is part of the Feedback category. Other components for similar needs:

• AriaLive — to announce page changes to screen reader users.
• Badge — to highlight new, unread, or important information.
• Dialog — when people need to make a choice or read an important message before continuing.
• Drawer — to show extra content in a panel that slides in from the side.
• FormStatus — to show validation errors, warnings, or messages near a form.
• GlobalStatus — to show important page-level messages or a summary of form errors.

See all in Feedback →

#Demos

#To showcase the 404 status code component

<GlobalError statusCode="404" />

#To showcase the 500 status code component

<GlobalError statusCode="500" />

#To showcase a custom status code component

const links = [
  {
    text: 'Forside',
    url: 'https://www.dnb.no/',
  },
  {
    text: 'Forsikring',
    url: 'https://www.dnb.no/forsikring/',
  },
  {
    text: 'Sparing',
    url: 'https://www.dnb.no/sparing/',
  },
  {
    text: 'Lån',
    url: 'https://www.dnb.no/lan/',
  },
  {
    text: 'Kontakt',
    url: 'https://www.dnb.no/hjelp-og-veiledning/',
  },
]
render(
  <GlobalError
    statusCode="403"
    title="Access Denied"
    text="More related text"
    links={links}
  >
    Additional Content
  </GlobalError>
)