Presence Indicator

A colored dot that indicates whether a device is online or offline. Shows a green glow halo when online and a flat dot when offline.

Playground

Props

Prop	Type	Default	Description
online	boolean	—	Required. Whether the device is online. Must be a boolean — non-boolean values coerce to false
onlineColor	string	"#22c55e"	Dot color when online
offlineColor	string	"#ef4444"	Dot color when offline
size	number	12	Diameter in pixels

---

Glow Effect

When online is true, the dot renders with a glow halo (box-shadow at 20% opacity). The glow scales proportionally with the parent container width. When offline, there's no glow — just a flat dot.

---

CSS Custom Properties

You can override the default colors globally via CSS variables:

:root {
  --relay-presence-online: #00ff88;
  --relay-presence-offline: #ff4444;
}

These are used as fallbacks when onlineColor / offlineColor props are not set.

---

Accessibility

The component renders with role="status" and aria-label set to "Online" or "Offline" based on the current state.

---

With Hooks

import { useRelayPresence, PresenceIndicator } from "@relay-x/ui";

function DeviceStatus({ deviceIdent }) {
  const { online } = useRelayPresence(deviceIdent);

  return (
    <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
      <PresenceIndicator online={online ?? false} />
      <span>{online ? "Online" : "Offline"}</span>
    </div>
  );
}