Status Dot

Colored status indicator dot used inside selects and tables.

Colors

Haloed indicator dots.

Active Pending In review

function StatusDotColors() {
  return (
    <div className="flex flex-wrap items-center gap-4 text-body-regular text-text-secondary">
      <span className="inline-flex items-center gap-2">
        <StatusDot color="green" /> Active
      </span>
      <span className="inline-flex items-center gap-2">
        <StatusDot color="yellow" /> Pending
      </span>
      <span className="inline-flex items-center gap-2">
        <StatusDot color="indigo" /> In review
      </span>
    </div>
  );
}

function StatusDotColors() {
  return (
    <div className="flex flex-wrap items-center gap-4 text-body-regular text-text-secondary">
      <span className="inline-flex items-center gap-2">
        <StatusDot color="green" /> Active
      </span>
      <span className="inline-flex items-center gap-2">
        <StatusDot color="yellow" /> Pending
      </span>
      <span className="inline-flex items-center gap-2">
        <StatusDot color="indigo" /> In review
      </span>
    </div>
  );
}

Installation

npx shadcn@latest add https://boardcn.dev/r/status-dot.json

npx shadcn@latest add https://boardcn.dev/r/status-dot.json

BoardCN dependencies

The CLI installs these for you — you do not need to add them yourself.

Source

The file the CLI copies into your project.

components/base/badges/status-dot.tsx

import type { HTMLAttributes, Ref } from "react";
import { cx, sortCx } from "@/utils/cx";

type StatusDotColor = "green" | "yellow" | "indigo";

export interface StatusDotProps extends HTMLAttributes<HTMLSpanElement> {
  color?: StatusDotColor;
  ref?: Ref<HTMLSpanElement>;
}

const styles = sortCx({
  base: "inline-flex size-3 shrink-0 items-center justify-center rounded-full",
  halo: {
    green: "bg-status-dot-green-halo",
    yellow: "bg-status-dot-yellow-halo",
    indigo: "bg-status-dot-indigo-halo",
  },
  dot: {
    green: "bg-green-500",
    yellow: "bg-yellow-500",
    indigo: "bg-indigo-500",
  },
});

export function StatusDot({ color = "green", className, ref, ...props }: StatusDotProps) {
  return (
    <span
      ref={ref}
      aria-hidden
      className={cx(styles.base, styles.halo[color], className)}
      {...props}
    >
      <span className={cx("size-1.5 rounded-full", styles.dot[color])} />
    </span>
  );
}

import type { HTMLAttributes, Ref } from "react";
import { cx, sortCx } from "@/utils/cx";

type StatusDotColor = "green" | "yellow" | "indigo";

export interface StatusDotProps extends HTMLAttributes<HTMLSpanElement> {
  color?: StatusDotColor;
  ref?: Ref<HTMLSpanElement>;
}

const styles = sortCx({
  base: "inline-flex size-3 shrink-0 items-center justify-center rounded-full",
  halo: {
    green: "bg-status-dot-green-halo",
    yellow: "bg-status-dot-yellow-halo",
    indigo: "bg-status-dot-indigo-halo",
  },
  dot: {
    green: "bg-green-500",
    yellow: "bg-yellow-500",
    indigo: "bg-indigo-500",
  },
});

export function StatusDot({ color = "green", className, ref, ...props }: StatusDotProps) {
  return (
    <span
      ref={ref}
      aria-hidden
      className={cx(styles.base, styles.halo[color], className)}
      {...props}
    >
      <span className={cx("size-1.5 rounded-full", styles.dot[color])} />
    </span>
  );
}

Props

Generated from the component's TypeScript types. Standard DOM and React Aria props are omitted.

StatusDot

Prop	Type	Default	Description
color	`"green" \| "yellow" \| "indigo"`	`green`	—