Connection status
Communicates connecting, connected, offline, and reconnecting states.
Preview
Connected
In action
OfflineYour work is saved on this device
When to use
Use it for
- Network-dependent controls and synchronization status.
Not for
- Inferring server connectivity from browser online status alone.
Install
Three ways in. They share one source, so the pixels match whichever you pick.
1. Import the package
npm install @noorddev/vlak-react
// once, next to your app's root
import "@noorddev/vlak-react/css";
import { ConnectionStatus } from "@noorddev/vlak-react";Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/connection-status.
2. Vendor the source
npx @noorddev/vlak-cli add connection-status
The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.
3. Through shadcn
npx shadcn add https://vlak.dev/r/connection-status.json
The same registry item, installed by shadcn's CLI.
CSS only
<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />
No React. Link vlak.css and use the markup and classes below.
React
import { ConnectionStatus } from "@noorddev/vlak-react";
<ConnectionStatus state="connected" description="Changes are synchronized" />Props
ConnectionStatus
Application-supplied connection state. A successful retry does not assume reconnection.
| Prop | Type | Default | Description |
|---|---|---|---|
staterequired | ConnectionState | ||
label | string | ||
description | ReactNode | ||
onRetry | () => void | Promise<void> |
Also accepts HTMLAttributes<HTMLDivElement>.
Keyboard
| Keys | Does |
|---|---|
| Tab, Enter, Space | Tab reaches retry when offline and a callback is supplied; Enter or Space retries. |
Accessibility
- State is visible text announced politely. Retry completion does not assume the connection recovered.
Markup
<div class="rs-connection-status"><span class="rs-connection-status-label" role="status">Connected</span><span class="rs-connection-status-detail">Changes are synchronized</span></div>
Classes
.rs-connection-status.rs-connection-status-label.rs-connection-status-detail