Connection Status

Auto-detects online/offline via navigator API. Offline triggers a persistent warning bar with amber glow pulse. Reconnection auto-dismisses with success flash.

Components

Connection Status

feedback

interactive

<arc-connection-status>

Overview

ConnectionStatus monitors the browser's network state via the Navigator online/offline API and surfaces a persistent notification bar when connectivity is lost. The component requires zero configuration — place it once in your layout and it handles everything automatically. When the browser goes offline, a warning bar slides down from the top of the viewport with an amber glow pulse animation, informing the user that their connection has been lost. The bar persists until connectivity is restored, at which point it briefly flashes green (success variant) with a "Back online" message before auto-dismissing. The component fires `arc-online` and `arc-offline` events so your application can react to connectivity changes — pausing sync operations, queuing mutations for retry, or showing additional UI. The bar uses `aria-live="polite"` so screen readers announce connectivity changes at the next convenient pause, avoiding interruption of active tasks.

Guidelines

When to use

Place a single <arc-connection-status> at the root of your layout
Listen for arc-offline to pause background sync or queue operations
Listen for arc-online to retry failed requests or flush queued mutations
Let the component handle its own visibility — do not toggle it manually
Test with browser DevTools Network offline simulation

When not to use

Do not create multiple <arc-connection-status> elements — one per application is sufficient
Do not override the component's internal visibility state — it manages itself
Do not rely on connection-status as a health check — it only detects browser-level offline
Do not use connection-status for API-level errors — use toast or alert for those
Do not hide the component on specific pages — connectivity is always relevant

Features

Automatic online/offline detection via Navigator API
Persistent warning bar with amber glow pulse when offline
Success flash with auto-dismiss when connectivity is restored
Zero-configuration — place once, no props required
`arc-online` and `arc-offline` events for application-level reactions
Slide-down enter and collapse exit transitions
aria-live="polite" for non-disruptive screen-reader announcements
Full-width bar anchored to the top of the viewport
Respects `prefers-reduced-motion` — disables glow pulse animation when set

Preview

Toggle your network connection in browser DevTools to see the status bar appear.

Usage

This component requires JavaScript. No pure HTML/CSS version is available — use the Web Component directly or a framework wrapper.

<script type="module" src="@arclux/arc-ui"></script>

<!-- Place once at the root of your layout -->
<arc-connection-status></arc-connection-status>

import { ConnectionStatus } from '@arclux/arc-ui-react';

export function App() {
  return (
    <>
      <ConnectionStatus
        onArcOffline={() => console.log('Lost connection')}
        onArcOnline={() => console.log('Back online')}
      />
      {/* rest of your app */}
    </>
  );
}

<script setup>
import { ConnectionStatus } from '@arclux/arc-ui-vue';

const onOffline = () => console.log('Lost connection');
const onOnline  = () => console.log('Back online');
</script>

<template>
  <ConnectionStatus @arc-offline="onOffline" @arc-online="onOnline" />
  <!-- rest of your app -->
</template>

<script>
  import { ConnectionStatus } from '@arclux/arc-ui-svelte';
</script>

<ConnectionStatus
  on:arc-offline={() => console.log('Lost connection')}
  on:arc-online={() => console.log('Back online')} />

import { Component } from '@angular/core';
import { ConnectionStatus } from '@arclux/arc-ui-angular';

@Component({
  imports: [ConnectionStatus],
  template: `
    <arc-connection-status
      (arc-offline)="onOffline()"
      (arc-online)="onOnline()">
    </arc-connection-status>
  `,
})
export class AppComponent {
  onOffline() { console.log('Lost connection'); }
  onOnline()  { console.log('Back online'); }
}

import { ConnectionStatus } from '@arclux/arc-ui-solid';

export function App() {
  return (
    <>
      <ConnectionStatus
        onArcOffline={() => console.log('Lost connection')}
        onArcOnline={() => console.log('Back online')}
      />
      {/* rest of your app */}
    </>
  );
}

import { ConnectionStatus } from '@arclux/arc-ui-preact';

export function App() {
  return (
    <>
      <ConnectionStatus
        onArcOffline={() => console.log('Lost connection')}
        onArcOnline={() => console.log('Back online')}
      />
      {/* rest of your app */}
    </>
  );
}

API

online boolean =true

Events

arc-online: Fired when the browser regains network connectivity
arc-offline: Fired when the browser loses network connectivity

Connection Status

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

Events

See Also

Docs

Project

Arclight