ErrorState
StableA red message for a problem that can be fixed, with an optional Try again button.
Also known as error page, error message, failure state, retry
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
With retry
Something went wrong
<ErrorState message="We could not load your conversation. Your draft is safe." onRetry={() => {}} />Say whether the person's work is safe and offer a next step.
When to use it
Says that something failed, that it can be fixed, and offers to try again. It is a red Callout with that wording ready to use.
Made of: Alert icon · Title · Message · Try again button
Use it for
- A request that failed and is safe to try again.
- A part of the page that could not load.
Not for
- A request the assistant will not do: use RefusalNotice.
- A usage limit: use RateLimitNotice.
- A whole empty area with a drawing: use EmptyState.
Do and avoid
Something went wrong
Error 504
Do
- Say what happened in plain words, and whether the person's work was kept.
- Add Try again only when it can work.
- Use a specific title when you know the cause.
Avoid
- Do not use it for refusals or usage limits. Use RefusalNotice or RateLimitNotice.
- Do not show error codes or technical details as the message.
- Do not blame the person. Describe what went wrong on our side.
On a phone
- The message wraps, and on a phone the Try again button drops under it so the text keeps its full width.
- Try again keeps its size and has a 44px tap area on touch screens.
- It fills the width of its container.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Something went wrong" | Heading of the callout. |
| messagerequired | ReactNode | none | What happened, and whether the person's work is safe. |
| onRetry | () => void | none | Adds a Try again button when provided. |
"Show code under the preview gives the code for the example on the stage."
States
States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.
- retry
- Pass onRetry to show a Try again button next to the message.
Tokens
Change one of these and every part that uses it follows.
--danger-soft--danger-fg
Built in
- Screen readers announce it right away when it appears.
- Try again is a real button with visible words.
- An alert icon and the words come with the red, so color is not the only clue.
What you need to do
- Write a message that says what failed and whether the person's work is safe.
- Move the keyboard to a sensible spot after a retry works or fails again.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide