Skip to main content
Elastic UI
Elastic UI
Getting startedComponentsPatternsContentData visualization
EUI ChangelogGitHubFigma
  • Overview
  • Elastic AI Assistant
  • Error messages
    • Help users avoid errors
    • How to write good error messages
    • Error page
    • Error banner
    • Validation errors
    • Error warning
    • Error examples
  • Help content
  • Save buttons
  • Tables
  • EUI
  • Error messages
  • Error page

Error page


Use an error page when it is not possible to show the user the page they expected to see.

  • 403 Example
  • 404 Example

An empty prompt component which reads, 403, you can't access this page. You don't have permission, if you think this is a mistake, contact your administrator: admin@example.co.

An empty prompt component which reads, 404, we can't find the page you're looking for. If you typed the URL, check it's correct. If you clicked a link, contact your administrator: admin@example.co.

When to use this pattern

Use an error page when it is not possible to show the user the page they expected to see. For example:

  • 403: user does not have permission
  • 404: cannot find page or resource
  • 410: page or resource has been deleted

We have created a list of

example error messages for common error codes.

When not to use this pattern

Error pages are a hard stop in the user's journey. They can be jarring and annoying to encounter.

Do not use an error page to display a warning about an unrelated error, instead use the error warning pattern.

Do not use an error page for validating information the user has entered, instead use the validation errors pattern.

Do not use an error page when you're able to still show the page the user was expecting, instead use the error banner pattern.

How it works

Use the EuiEmptyPrompt component to build your error pages.

Redirect the user to your error page in situations where an error occurs and the expected page can't be shown.

Help improve this pattern

To help make sure that this page is useful, relevant and up to date, you can join our #ux‑wg‑patterns discussions on Slack.

Edit this page

Previous
How to write good error messages
Next
Error banner
  • When to use this pattern
  • When not to use this pattern
  • How it works
  • Help improve this pattern
EUI is dual-licensed under Elastic License 2.0 and Server Side Public License, v 1 | Crafted with ❤ by Elastic