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
- main
States
- offline
- success
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.