Status Indicator

Small colored dot indicating online, offline, away, or busy status.

Installation#

npx @aniui/cli add status-indicator

Online

Away

Busy

Offline

Web preview — components render natively on iOS & Android

import { StatusIndicator } from "@/components/ui/status-indicator";

export function MyScreen() {
  return (
    <View className="flex-row items-center gap-2">
      <StatusIndicator status="online" pulse />
      <Text>Online</Text>
    </View>
  );
}

Usage#

app/index.tsx

import { StatusIndicator } from "@/components/ui/status-indicator";

export function MyScreen() {
  return (
    <View className="flex-row items-center gap-2">
      <StatusIndicator status="online" pulse />
      <Text>Online</Text>
    </View>
  );
}

Props#

PropTypeDefault

status

"online" | "offline" | "away" | "busy"

"offline"

size

"sm" | "md" | "lg"

"md"

pulse

boolean

false

className

string

-

Also accepts all View props.

Accessibility#

Visual status dot with accessibilityLabel describing the status (e.g., "online", "offline").
Color alone does not convey status; the label ensures screen reader support.

Source#

components/ui/status-indicator.tsx

import React from "react";
import { View } from "react-native";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";

const statusVariants = cva("rounded-full", {
  variants: {
    status: {
      online: "bg-green-500",
      offline: "bg-muted-foreground",
      away: "bg-amber-500",
      busy: "bg-destructive",
    },
    size: {
      sm: "h-2 w-2",
      md: "h-3 w-3",
      lg: "h-4 w-4",
    },
  },
  defaultVariants: { status: "offline", size: "md" },
});

export interface StatusIndicatorProps
  extends React.ComponentPropsWithoutRef<typeof View>,
    VariantProps<typeof statusVariants> {
  className?: string;
  pulse?: boolean;
}

export function StatusIndicator({ status, size, pulse, className, ...props }: StatusIndicatorProps) {
  return (
    <View
      className={cn(
        statusVariants({ status, size }),
        pulse && status === "online" && "animate-pulse",
        className
      )}
      accessibilityLabel={`Status: ${status ?? "offline"}`}
      {...props}
    />
  );
}

Previous← Stat Card NextStepper →