errors pattern
Offline
Network unavailable. Show cached content + offline banner.
When to use it
Browser navigator.onLine is false OR fetch failed with network error.
- Don't hide cached content
- Banner explains state
- Auto-recover on reconnect
Layout regions
- banner
- Top sticky banner
- main
- Cached content
States
- offline
- Offline
- success
- Reconnected
Example
<>{!online && <Banner variant="warning">You're offline. Changes will sync when you're back.</Banner>}<main>{children}</main></>The full Offline pattern specifies 2 exact microcopy strings, 2 motion specs, 4 composition rules — all gated behind the full recipe. Get the full recipe.