Connection Status

Components

Connection Status

feedback

interactive

<arc-connection-status>

Overview

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

Create multiple <arc-connection-status> elements — one per application is sufficient
Override the component's internal visibility state — it manages itself
Rely on connection-status as a health check — it only detects browser-level offline
Use connection-status for API-level errors — use toast or alert for those
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: `
    <ConnectionStatus
      (arc-offline)="onOffline()"
      (arc-online)="onOnline()">
    </ConnectionStatus>
  `,
})
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 */}
    </>
  );
}

Events

Event	Description
`arc-online`	Fired when the browser regains network connectivity
`arc-offline`	Fired when the browser loses network connectivity