Error Page

Build simple error pages

Use the ErrorPage component to build simple error pages for your users to notify them if something goes wrong. They can prevent user from abandoning the site, and can be used for providing navigation options to important sections on your site. You can customize the type of error, set your titles, provide additional text, and define buttons for restoring user journey.

<ErrorPage
    type={404}
    title="Page Not Found"
    subTitle="Sorry, we cannot found the page you were looking for."
    buttons={[
        { text: 'Back to Home', icon: 'home', href: '#' }
    ]}
/>

The component expects a type for the HTTP status code, and a title prop for describing the error for the user. Optionally, you can pass a subTitle prop to create a secondary title, or pass an array of Button component using the buttons prop.

HTTP Status Codes

You can use the type prop to build different error pages, and you can pass the typeColor prop to also customize the color of the text:

<ErrorPage
    type={500}
    typeColor="var(--w-color-alert)"
    title="Something gone wrong"
    subTitle="We encountered an error. Reload the page or contact us if the issue persist."
    buttons={[
        { text: 'Reload', theme: 'secondary', href: '#' },
        { text: 'Contact', theme: 'secondary', href: '#' }
    ]}
/>

<ErrorPage
    type={403}
    typeColor="var(--w-color-warning)"
    title="Access denied"
    subTitle="If you think this is a mistake, please request access from our support team."
    buttons={[
        { text: 'Request access', theme: 'success', href: '#' }
    ]}
/>

You can use Webcore color variables to specify an existing color for your status. By default the status code is set to --w-color-info. You can override this globally by overwriting the following CSS variable:

body {
    --w-type-color: var(--w-color-primary);
}

Error Page Buttons

The buttons can be specified using an array of Button component props, along with the text and icon properties to set the text for the button or an optional icon. You can pass the type of the icon as a string when using the Astro component, or import an SVG icon and pass the markup. For available icons in Webcore, see the documentation of the Icon component.

<ErrorPage
    type={404}
    title="Page Not Found"
    buttons={[
        { text: 'Back to Home', icon: 'home', href: '#' },
        { text: 'Docs', icon: 'file', theme: 'secondary', href: '#' },
        { text: 'GitHub', icon: 'github', theme: 'secondary', href: '#' }
    ]}
/>

API

type ErrorPageProps = {
    type: number
    typeColor?: string
    title: string
    subTitle?: string
    buttons?: ({
        text: string
        icon?: string
    } & ButtonProps)[]
}