Status badge 1

Shows a state with a colored label and a pulsing dot.

Success

Online

Active

Connected

Error

Offline

Disconnected

Failed

Warning

Away

Busy

Pending

Info

Idle

In Progress

Syncing

Default

Unknown

Not Set

N/A

View code

import { Status, StatusIndicator, StatusLabel } from "@/components/kit/status-badge-1";

const groups = [
  { title: "Success", variant: "success", labels: ["Online", "Active", "Connected"] },
  { title: "Error", variant: "error", labels: ["Offline", "Disconnected", "Failed"] },
  { title: "Warning", variant: "warning", labels: ["Away", "Busy", "Pending"] },
  { title: "Info", variant: "info", labels: ["Idle", "In Progress", "Syncing"] },
  { title: "Default", variant: "default", labels: ["Unknown", "Not Set", "N/A"] },
] as const;

export function StatusBadge1Demo() {
  return (
    <div className="flex flex-col gap-6">
      {groups.map(({ title, variant, labels }) => (
        <div key={title} className="flex flex-col gap-3">
          <h3 className="font-medium text-sm">{title}</h3>
          <div className="flex flex-wrap items-center gap-2.5">
            {labels.map((label) => (
              <Status key={label} variant={variant}>
                <StatusIndicator />
                <StatusLabel>{label}</StatusLabel>
              </Status>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}

Use it for anything with a state, such as a service, a person or a job. Each part is separate, so you can leave out the dot or stop it from pulsing.

Installation

bunx --bun shadcn@latest add HarshitMahajan/UI/status-badge-1

Copies the code to components/kit/status-badge-1.tsx installs its packages, and adds the tokens it needs to your globals.css. Your existing shadcn components aren't touched.

Usage

import { Status, StatusIndicator, StatusLabel } from "@/components/kit/status-badge-1"

<Status variant="success">
  <StatusIndicator />
  <StatusLabel>Online</StatusLabel>
</Status>

Composition

Status
├── StatusIndicator
└── StatusLabel

Features

Five states: default, success, error, warning and info
Three sizes
A pulsing dot for live states, or a still one for settled states
Colors come from the success, danger, warning and info tokens
Renders as a link through the render prop

Sizes

Use size to fit a dense table or a page header.

Small

Default

Large

View code

import { Status, StatusIndicator, StatusLabel } from "@/components/kit/status-badge-1";

export function StatusBadge1Sizes() {
  return (
    <>
      <Status variant="success" size="sm">
        <StatusIndicator />
        <StatusLabel>Small</StatusLabel>
      </Status>
      <Status variant="success">
        <StatusIndicator />
        <StatusLabel>Default</StatusLabel>
      </Status>
      <Status variant="success" size="lg">
        <StatusIndicator />
        <StatusLabel>Large</StatusLabel>
      </Status>
    </>
  );
}

Still dot

Set pulse={false} for states that aren't live, such as an invoice status.

Paid

Overdue

Draft

View code

import { Status, StatusIndicator, StatusLabel } from "@/components/kit/status-badge-1";

export function StatusBadge1Still() {
  return (
    <>
      <Status variant="success">
        <StatusIndicator pulse={false} />
        <StatusLabel>Paid</StatusLabel>
      </Status>
      <Status variant="warning">
        <StatusIndicator pulse={false} />
        <StatusLabel>Overdue</StatusLabel>
      </Status>
      <Status variant="default">
        <StatusIndicator pulse={false} />
        <StatusLabel>Draft</StatusLabel>
      </Status>
    </>
  );
}

Label only

Leave out StatusIndicator for a plain tag.

Beta

Deprecated

View code

import { Status, StatusLabel } from "@/components/kit/status-badge-1";

export function StatusBadge1LabelOnly() {
  return (
    <>
      <Status variant="info">
        <StatusLabel>Beta</StatusLabel>
      </Status>
      <Status variant="error">
        <StatusLabel>Deprecated</StatusLabel>
      </Status>
    </>
  );
}

As a link

Pass render to make the badge open the page behind the state.

2 builds failed

View code

import { Status, StatusIndicator, StatusLabel } from "@/components/kit/status-badge-1";

export function StatusBadge1Link() {
  return (
    <Status variant="error" render={<a href="#install" />} className="hover:bg-danger/20">
      <StatusIndicator />
      <StatusLabel>2 builds failed</StatusLabel>
    </Status>
  );
}

Accessibility

Meaning beyond color

Always keep a StatusLabel. The dot's color alone doesn't tell everyone what the state is.

Reduced motion

The pulse stops for people who ask their device to reduce motion. The dot stays visible.

API Reference

Status

The badge itself.

Prop	Type	Default	Description
variant	"default" \| "success" \| "error" \| "warning" \| "info"	"default"	The state to show.
size	"default" \| "sm" \| "lg"	"default"	The badge size.
render	ReactElement \| function	-	Render the badge as another element, such as a link or your router's Link.
className	string	-	Additional classes for the badge.

StatusIndicator

The dot. It takes its color from the Status variant.

Prop	Type	Default	Description
pulse	boolean	true	Whether the ring pulses outward.
className	string	-	Additional classes for the dot.

StatusLabel

The text.

Prop	Type	Default	Description
className	string	-	Additional classes for the label.