Error state | Lime design system

Examples

Retry a list

Couldn't load your activity

Your money is safe. Check your connection and try again.

When to use it

Use: A list, card or figure failed to load, and loading it again may work.
Use: Part of a screen failed while the rest works, such as the balance (layout="inline").
Not for: The load worked and there is nothing yet. Use Empty.
Not for: Still loading. Use Skeleton.
Not for: A value the person typed is wrong. Use Field.
Not for: A payment failed. Show it on the payment with its own status. Use Status.

7 rules

Must: Put it where the content would be, in the region that was loading, never as a toast or a dialog. Because a toast leaves a blank region behind and fades before the person can retry.
Must: Name what failed in the title, plainly, without a code or blame. Because a code says nothing about which money is missing or whether to wait.
Must: Pass retrying while the load runs, so Try again shows its spinner and keeps focus. Because without it the press shows no sign the load restarted and invites a second press.
Should: Use description to say what is safe or what to do, such as Your money is safe.
Should: Use layout="inline" for a part of a screen and block for a whole list or card.
Never: Make Try again the lime primary; it stays secondary. Because a lime retry takes the glow from the screen's one real next step.
Should: Keep aria-busy on the region while retrying, as for the skeleton.

4 checks

: It is role="status", a polite live region, so the failure is read without cutting off speech.
: The icon is hidden; the title carries the meaning, so color is never the only signal.
: Try again is a real button that keeps focus while retrying (pending).
: Error text is 6.6:1 on the page; the icon sits on the danger tint.

4 edge cases

Long title: Wraps; inline keeps the button on the row and the text shrinks.
Retry fails again: retrying goes false and the same state stays; after a few tries, say to come back later.
Offline: Say so in description; Try again works once the connection is back.
No retry possible: Leave out onRetry and say what to do in description.

6 props

7 tokens