Skip to content

OnlineIndicator

SM · 950B gzip budget

Pulsing dot showing online presence status.

Category
Feedback & status
Budget
sm, single-purpose control
External runtime
React / React DOM only
axe fixtureSSR rendersource scanbundle budget

Preview

Live fixture
Preview locale

Try the component here. Locale-aware formatting and direction follow the selected language; example content and labels are not automatically translated. Overlay demos use interactive launchers.

Install

npx shadcn@latest add https://gear5-ui.vercel.app/r/online-indicator.json

Copies the source into your project.

New here? Set up Tailwind and import aliases first →

Source & props

Edit on GitHub ↗

Prop types and inline documentation are included below. This is repository source; the installer rewrites shared imports for your project.

"use client";

import React from "react";

export interface OnlineIndicatorProps {
  online: boolean;
  size?: number;
  label?: string;
}

export function OnlineIndicator({
  online,
  size = 10,
  label,
}: OnlineIndicatorProps) {
  return (
    <span
      role="status"
      aria-label={label || (online ? "Online" : "Offline")}
      style={{
        display: "inline-flex",
        alignItems: "center",
        gap: "0.375rem",
        fontSize: "0.875rem",
        color: "#333",
      }}
    >
      <span
        aria-hidden="true"
        style={{
          width: size,
          height: size,
          borderRadius: "50%",
          backgroundColor: online ? "#4caf50" : "#f44336",
          flexShrink: 0,
          boxShadow: online
            ? "0 0 0 2px rgba(76,175,80,0.2)"
            : "0 0 0 2px rgba(244,67,54,0.2)",
        }}
      />
      {label && (online ? "Online" : "Offline")}
    </span>
  );
}

What CI checks

Quality contract
  • Bundled, minified and gzipped against its tier budget
  • Audited by axe in the state previewed above
  • Rendered through react-dom/server with no browser globals
  • Scanned for network calls, dangerous sinks, and unguarded animation
← All components