Result
Result tells people how something ended: a submitted form, a finished job, a page that isn’t there or isn’t theirs to see. An icon and a title carry the outcome, a description explains it, and a footer offers the next step.
Demos
Basic
A status, a title and a description.
Status
info, success, warning and error show a symbol in the status color. In Elegant it is a disc in a soft halo; in Brutal an ink-outlined square tile.
HTTP status codes
404, 403, 500 and 418 show the code itself as large numerals. 404 uses the info color (nothing broke, the page just isn’t there), 403 warning, 500 error and 418 the playful accent.
Size
size scales the icon, the title and the text together.
Content and actions
children goes under the description, footer at the bottom, usually buttons.
Custom icon
icon replaces the status icon. It takes the status color through currentColor and the icon size as its font size, so an SVG of 1em fills the space.
Props
| Name | Type | Default | Description | Version |
|---|---|---|---|---|
status | info | success | warning | error | 404 | 403 | 500 | 418 | info | Picks the icon and its color. HTTP codes show as numerals. | Unreleased |
title | ReactNode | undefined | The headline. | Unreleased |
description | ReactNode | undefined | Explains the result under the title. | Unreleased |
size | small | medium | large | huge | medium | Scales the icon and the type. | Unreleased |
icon | ReactNode | undefined | Replaces the status icon. Colored like the status; 1em is the icon size. | Unreleased |
footer | ReactNode | undefined | Actions at the bottom, laid out in a centered, wrapping row. | Unreleased |
children | ReactNode | undefined | Extra content between the description and the footer. | Unreleased |
Result also accepts native div attributes and a ref. The icon is hidden from screen readers, so let the title say what happened. When the result appears after an action, such as a form submission, add role="status" (or role="alert" for failures) so it is announced.