Skip to content
Pinky UI

feedback

Connection State

Makes offline, reconnecting and restored states actionable while keeping local work available.

  • feedback
  • offline
  • reconnect
  • sync
  • status
Related pattern

A product connection state is recoverable and scoped to the work surface, not a browser-style interruption banner.

Live preview

Offline · local work stays available.

offline

Quick usage

usage
import { ConnectionState } from "@pinky-ui/systems";

<ConnectionState defaultMode="offline" onReconnect={reconnect} />

Install

Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Accessibility

  • Pointer and keyboard paths expose the same state change.
  • Status and focus remain meaningful when motion is disabled.

Performance

  • Uses local state and transforms; no per-frame React pointer loop.

Reduced motion

Resolves state changes without layout animation while preserving semantics.

When to use

  • Product workflows with a clear reversible or inspectable state.

When not to use

  • Decorative motion without a user task.

Skill

Purpose

Make offline, reconnecting and restored states actionable while preserving local product work.

Use when

The product can continue locally or queue work while a connection is unavailable and needs an explicit recovery path.

Avoid

Blocking every surface with a browser-style banner, pretending local work synced, or forcing a page refresh to recover.

Accessibility

Use a polite status for connection changes, state what remains local, and label reconnect actions clearly. Do not announce every network tick.

Keyboard and touch

Reconnect is a native button with a reachable target. The restored state should not steal focus or make the user repeat the original action.

Reduced motion and performance

Use a static status indicator when motion is reduced. Cancel stale reconnect callbacks and avoid continuous polling in the component.

Composition and anti-patterns

Pair with Queued Action or Optimistic Action when work has a local queue or rollback. Do not use it as a decorative online badge.

Open this skill on its own page