Skip to content

StatusBadge

SM · 950B gzip budget

Small coloured status indicator with text label.

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

Preview

Live fixture
Preview locale
Active

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/status-badge.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 StatusBadgeProps {
  tone: "info" | "success" | "warning" | "error" | "neutral";
  label: string;
  size?: "sm" | "md";
}

const toneColors: Record<string, string> = {
  info: "#2196f3",
  success: "#4caf50",
  warning: "#ff9800",
  error: "#f44336",
  neutral: "#9e9e9e",
};

export function StatusBadge({ tone, label, size = "md" }: StatusBadgeProps) {
  const dotSize = size === "sm" ? 6 : 8;
  const fontSize = size === "sm" ? "0.75rem" : "0.875rem";

  return (
    <span
      role="status"
      style={{
        display: "inline-flex",
        alignItems: "center",
        gap: "0.375rem",
        fontSize,
        lineHeight: 1,
        color: "#333",
      }}
    >
      <span
        aria-hidden="true"
        style={{
          width: dotSize,
          height: dotSize,
          borderRadius: "50%",
          backgroundColor: toneColors[tone],
          flexShrink: 0,
        }}
      />
      {label}
    </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