404 Page

Open in Playground

NotFoundPage is a ready-made "page not found" screen: a large status code, a title, a short explanation and the way out, a link home and (with onBack) a "go back" button. It is not tied to 404: pass code, title and description for a 403, a 500 or a "coming soon" page. children render under the buttons (a search box, a list of suggestions). Use homeHref={null} to drop the home link, linkComponent / linkProp for a router link, and fullScreen to center it in the whole viewport.

404: Page not found

The page you are looking for does not exist or has moved.

Go home

403: Only Gru can go in here

Ask Gru to add you to the Minion crew, or go and look for bananas instead.

Back to the lair

Props

  • codestring
    Default: '404'

    Large status code shown above the title (read out before the title by screen readers).

  • titlestring
    Default: 'Page not found'

    Heading of the page.

  • descriptionstring
    Default: 'The page you are looking for does not exist or has moved.'

    Short explanation; pass an empty string to hide it.

  • homeHrefstring | null
    Default: '/'

    Destination of the home link; null hides it.

  • homeLabelstring
    Default: 'Go home'

    Text of the home link.

  • onBack() => void

    Adds a "go back" button that calls this (e.g. () => navigate(-1)).

  • backLabelstring
    Default: 'Go back'

    Text of the back button.

  • linkComponentElementType
    Default: 'a'

    Component used for links, e.g. a router Link.

  • linkPropstring
    Default: 'href'

    Name of the destination prop on linkComponent (e.g. "to" for react-router).

  • fullScreenboolean
    Default: false

    Center it in the whole viewport instead of filling the space it is given.

  • classNamestring
    Default: ''

    Extra classes for the root element.

  • childrenReactNode

    Extra content under the buttons.