Status badge 2

Puts a main state next to a quieter second one, split by a line.

Protection

SSO login

Live

Audit trails

Safety checks

Production

View code

import { CircleCheck, CircleX, ShieldCheck } from "lucide-react";

import {
  StatusBadge2,
  StatusBadge2Primary,
  StatusBadge2Secondary,
} from "@/components/kit/status-badge-2";

export function StatusBadge2Demo() {
  return (
    <>
      <StatusBadge2>
        <StatusBadge2Primary>
          <ShieldCheck className="text-success" aria-hidden="true" />
          Protection
        </StatusBadge2Primary>
        <StatusBadge2Secondary>
          <CircleX aria-hidden="true" />
          SSO login
        </StatusBadge2Secondary>
      </StatusBadge2>
      <StatusBadge2>
        <StatusBadge2Primary>
          <CircleCheck className="fill-success text-card" aria-hidden="true" />
          Live
        </StatusBadge2Primary>
        <StatusBadge2Secondary>
          <CircleX aria-hidden="true" />
          Audit trails
        </StatusBadge2Secondary>
      </StatusBadge2>
      <StatusBadge2>
        <StatusBadge2Primary>
          <CircleX className="fill-danger text-card" aria-hidden="true" />
          Safety checks
        </StatusBadge2Primary>
        <StatusBadge2Secondary>
          <ShieldCheck aria-hidden="true" />
          Production
        </StatusBadge2Secondary>
      </StatusBadge2>
    </>
  );
}

Use it when two facts belong together, such as what's on and what isn't. You choose each icon and its color.

Installation

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

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

Usage

import { StatusBadge2, StatusBadge2Primary, StatusBadge2Secondary } from "@/components/kit/status-badge-2"

<StatusBadge2>
  <StatusBadge2Primary>
    <ShieldCheck className="text-success" aria-hidden="true" />
    Protection
  </StatusBadge2Primary>
  <StatusBadge2Secondary>
    <CircleX aria-hidden="true" />
    SSO login
  </StatusBadge2Secondary>
</StatusBadge2>

Composition

StatusBadge2
├── StatusBadge2Primary
└── StatusBadge2Secondary

Features

A strong main state and a muted second one
Two sizes, with icons sized for you
Works with one state or two
Icon colors come from tokens you choose

Sizes

Use size to change the height, text and icons together.

Live

Audit trails

Live

Audit trails

View code

import { CircleCheck, CircleX } from "lucide-react";

import { StatusBadge2, StatusBadge2Primary, StatusBadge2Secondary } from "@/components/kit/status-badge-2";

export function StatusBadge2Sizes() {
  return (
    <>
      <StatusBadge2 size="sm">
        <StatusBadge2Primary>
          <CircleCheck className="fill-success text-card" aria-hidden="true" />
          Live
        </StatusBadge2Primary>
        <StatusBadge2Secondary>
          <CircleX aria-hidden="true" />
          Audit trails
        </StatusBadge2Secondary>
      </StatusBadge2>
      <StatusBadge2>
        <StatusBadge2Primary>
          <CircleCheck className="fill-success text-card" aria-hidden="true" />
          Live
        </StatusBadge2Primary>
        <StatusBadge2Secondary>
          <CircleX aria-hidden="true" />
          Audit trails
        </StatusBadge2Secondary>
      </StatusBadge2>
    </>
  );
}

One state

Leave out StatusBadge2Secondary to show just the main state.

Protected

Needs review

View code

import { ShieldCheck, TriangleAlert } from "lucide-react";

import { StatusBadge2, StatusBadge2Primary } from "@/components/kit/status-badge-2";

export function StatusBadge2Single() {
  return (
    <>
      <StatusBadge2>
        <StatusBadge2Primary>
          <ShieldCheck className="text-success" aria-hidden="true" />
          Protected
        </StatusBadge2Primary>
      </StatusBadge2>
      <StatusBadge2>
        <StatusBadge2Primary>
          <TriangleAlert className="text-warning" aria-hidden="true" />
          Needs review
        </StatusBadge2Primary>
      </StatusBadge2>
    </>
  );
}

Accessibility

Hide decorative icons

The text already says the state, so mark icons with aria-hidden to avoid announcing them twice.

API Reference

StatusBadge2

The outer frame.

Prop	Type	Default	Description
size	"default" \| "sm"	"default"	The badge size.
className	string	-	Additional classes for the frame.

StatusBadge2Primary

The main state: an icon and its text.

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

StatusBadge2Secondary

The second state, muted and after the divider.

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