Result
#
OverviewUsed to provide users with feedback results to actions done on a page, often specifically server errors.
#
Design Guidelines#
Use when- A server error is encountered. For more information on server errors and a glossary of codes, refer to Mozilla's HTTP response status codes.
#
Don't use when- There is a validation error in a form or other component.
#
Visual Style- A result will typically have a heading explaining the error, followed by text that gives futher elaboration or next steps if needed.
#
Behaviour- This component should be used as a result of a user or server action.
#
Editorial- These are typically page level and may replace all content on the page.
- Use the default language built into the component.
#
Examples#
400 ErrorUse when the server returns a 400 error.
#
401 & 403 ErrorsUse when the server returns a 401 or 403 error.
#
404 ErrorUse when the server returns a 404 error.
#
405, 406 & 409 ErrorsUse when the server returns a 405, 406, or 409 error.
#
408 ErrorUse when the server returns a 408 error.
#
501, 502, 503 & 504 ErrorsUse when the server returns a 501, 502, 503, or 504 error.
#
599 ErrorUse when the server returns a 599 error.
#
Unknown error with default titleUse when a custom unknown error code is required.