Pricing

Status Badge

Status pill with a pinging dot across five semantic tones.

3,160

Bookmarks

12,100

Installs

71,400

Views

13 lines
import { StatusBadge } from "@/components/ui/status-badge"

export default function DemoStatusBadge() {
  return (
    <div className="flex min-h-[200px] flex-wrap items-center justify-center gap-3 p-8">
      <StatusBadge tone="operational" />

7 more lines behind a plan

Previews are free to watch. Reading and copying the full source needs a plan.

See plans
Dependencies
None — plain React + Tailwind
License
MIT License
Published
8/30/2025

Similar components

That's all 6 components

Explore more

Part of Cobalt — browse the full library on Nuxus.