Installation
Usage
import BadgeMorph from "@/components/ruixen/badge-morph";
export default function DeployStatus() {
const [status, setStatus] = useState<
"idle" | "loading" | "success" | "error"
>("idle");
return <BadgeMorph status={status} />;
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
status | "idle" | "loading" | "success" | "error" | - | The current status state (required) |
label | string | - | Override the default label for the current status |
className | string | - | Additional CSS classes |
Status States
| Status | Default Label | Icon | Glow | Animation |
|---|---|---|---|---|
idle | Ready | Breathing dot | None | Subtle pulse |
loading | Deploying | Arc spinner | Blue | Continuous rotation |
success | Live | Checkmark | Green | SVG path draw + scale pulse |
error | Failed | X mark | Red | SVG path draw |