StatusBadge

The shared status vocabulary for apps and branches, plus a billing plan companion.

StatusBadge is the status vocabulary every dashboard surface reuses: a colored dot and a quiet mono word. Color lives only in the dot — ready is green, error is red, stopped is muted, and provisioning breathes on a slow glow cycle while work is in flight. PlanBadge is the billing companion with the same footprint; paid plans get primary ink.

book-trackerreadypaid

invoice-searchprovisioningfree

standup-noteserrorfree

recipe-boxstoppedfree

import { dashboardApps } from "./fixtures";
import { PlanBadge, StatusBadge } from "./status-badge";

export const StatusBadgeDemo = () => (
  <div className="flex w-full max-w-sm flex-col gap-2">
    {dashboardApps.map((app) => (
      <div className="flex items-center gap-2" key={app.name}>
        <span className="min-w-32 font-mono text-foreground text-xs">
          {app.name}
        </span>
        <StatusBadge status={app.status} />
        <PlanBadge plan={app.plan} />
      </div>
    ))}
  </div>
);

export default StatusBadgeDemo;

Install

npx shadcn@latest add https://ui.neon.com/r/status-badge.json

Usage

import { PlanBadge, StatusBadge } from "@/components/neon-ui/status-badge";

<StatusBadge status="provisioning" />;
<PlanBadge plan="paid" />;

Wiring to Neon

Map a Neon compute endpoint (GET /projects/{id}/endpoints) onto the vocabulary: a pending_state or init state is provisioning, active is ready, idle is stopped. The typed example ships the full mapping.

Props

StatusBadge

PropType

status"ready" | "provisioning" | "error" | "stopped"

Lifecycle state of the app or branch.

Type"ready" | "provisioning" | "error" | "stopped"

label?string

Override the default status text.

Typestring

PlanBadge

PropType

plan"free" | "paid"

Billing plan of the tenant.

Type"free" | "paid"

label?string

Override the default plan text.

Typestring

Accessibility

The dot is decorative (aria-hidden); the status is always conveyed by the visible text. The provisioning breathe stops (dot holds fully lit) under prefers-reduced-motion.