registry:ui

StatusBadge

A colored circular badge for success/failure states.

Rendered example

✓

Install

orion-theme

registry/ui/status-badge.tsx

export function StatusBadge({ tone, children }: { tone: "red" | "green"; children: React.ReactNode }) {
  return (
    <span
      className={`flex size-5.5 shrink-0 items-center justify-center rounded-full text-white ${
        tone === "red" ? "bg-red" : "bg-green"
      }`}
      style={{ animation: "pop-in 300ms cubic-bezier(0.23,1,0.32,1) both" }}
    >
      {children}
    </span>
  )
}