ComponentsPayment Status

Payment Status Pill

A compact, glassy pill for showing payment or transaction status with a subtle spinner, label, and amount.

Installation

$ npx @nehal712521/inprogress add payment-status-pill

Preview

Switch between states to see how the pill adapts its glow and accent color.

Processing payment...We’re confirming things with your bank

$100.00

Usage

Use the variant, label, caption, and amount props to adapt the pill to your checkout or billing flows.

import { PaymentStatusPill } from "@/components/ui/payment-status-pill";

export default function Page() {
  return (
    <main className="min-h-screen bg-black text-white flex items-center justify-center">
      <PaymentStatusPill
        label="Processing payment..."
        caption="This usually takes a few seconds"
        amount="$100.00"
        variant="processing"
      />
    </main>
  );
}