Error State
Inline error panels for failed loads with a drawn glyph, message, retry with a retrying state, a details disclosure with a copyable error id, and compact, inline and full sizes.
Preview
Q3 report · inline
Something went wrong on our side
The server ran into a problem loading this. It's not you.
Error ID: req_7Hq2Lw91
GET /api/reports/q3 → 503 Service Unavailable
at fetchReport (reports.ts:48)
at loadDashboard (dashboard.ts:112)
retry-after: 30Widgets · compact
Activity didn't load
net_offline
Billing is limited to owners
Chart failed
You don't have access
Ask an owner of this workspace to give you access.
You're offline
We couldn't reach the server. Check your connection and try again.
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| kind | "network" | "server" | "permission" | "generic" | "generic" | Picks the drawn glyph and the default copy. |
| title / description | ReactNode | per kind | Override the message. Announced as an alert. |
| onRetry | () => void | Promise<unknown> | — | Shows Retry; a promise shows “Retrying…” until it settles. |
| retryLabel | string | "Try again" | Retry button text. |
| errorId / details | string | — | Behind “Show details”, with a Copy button for support. |
| defaultDetailsOpen | boolean | false | Start with details open. |
| actions | ReactNode | — | More buttons beside Retry. |
| size | "compact" | "inline" | "full" | "inline" | One row, a centred panel, or a page-filling state. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.