CwOfflineOverlay

Full-screen offline state with reconnect toast. For demo mode, toggle simulation to force the overlay.

CwOfflineOverlay example Copy code 
let simulateOffline = $state(false);

<CwSwitch
	label="Simulate offline"
	bind:checked={simulateOffline}
/>

<CwOfflineOverlay
	forceOffline={simulateOffline}
	onRetry={() => (simulateOffline = false)}
/>
Documentation Upgrade

Start here

CwOfflineOverlay can either follow the browser network state automatically or be forced into offline mode for testing. It also shows a short reconnected toast when the connection comes back.

How to think about it

  1. Use real browser state in production Leave `forceOffline` undefined when you want the component to respond to actual `online` and `offline` browser events.
  2. Force the state in demos or tests Pass `true` or `false` to `forceOffline` when you need deterministic UI state.
  3. Decide what Retry should do If you do not pass `onRetry`, the component falls back to reloading the page.

Props and callbacks

APITypeDetails
forceOffline
boolean | undefinedForces the offline state for demos or tests. Leave undefined to use real browser state.
reconnectedDurationMs

Default: 3000

numberHow long the "back online" toast stays visible.
onRetry
() => voidRetry handler. Falls back to `window.location.reload()` when omitted.
showRetryButton

Default: true

booleanShows or hides the retry button.
retryLabel

Default: Try Again

stringText displayed inside the retry button.

Copy-paste examples

These snippets intentionally show the full public API surface the live demo relies on.

Test the overlay with a local toggle

This is the safest way to develop the offline UI.

Test the overlay with a local toggle Copy code 
<script lang="ts">
	let simulateOffline = $state(false);
</script>

<CwSwitch label="Simulate offline" bind:checked={simulateOffline} />

<CwOfflineOverlay
	forceOffline={simulateOffline}
	onRetry={() => (simulateOffline = false)}
/>
Production usage with custom retry behavior

Leave `forceOffline` unset when the browser should drive the state.

Production usage with custom retry behavior Copy code 
<CwOfflineOverlay
	reconnectedDurationMs={5000}
	retryLabel="Reconnect now"
	onRetry={() => refreshDashboardData()}
/>