Error Page
404, 500 and maintenance page templates with drawn pebble numerals, helpful copy, site search, popular links, a status pill and a retry key with loading and failure states.
Preview
pebble.example/plans/q3-old
Error 404
This page wandered off
The link may be old or mistyped. Search for it, or start from one of these.
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "not-found" | "server-error" | "maintenance" | "not-found" | Template: 404, 500 or scheduled maintenance. |
| title | ReactNode | per variant | Overrides the heading. |
| description | ReactNode | per variant | Overrides the copy. |
| onSearch | (query) => void | — | Shows a site search on the 404 template. |
| links | { label, href, description? }[] | [] | Popular pages to offer instead. |
| status | { label, tone?, href? } | — | Status pill; tone "ok" | "degraded" | "down". |
| onRetry | () => Promise<boolean | void> | boolean | void | — | Shows Try again on the 500 template; resolve false to report it still fails. |
| homeHref | string | "/" | Target of Back to home. |
| reference | string | — | Request id shown in mono for support. |
| eta | string | — | Maintenance time left, shown in the drawn dial. |
| headingLevel | 1 | 2 | 1 | Use 2 when the page is embedded. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.