Stateful Badge

Installation

npx shadcn@latest add https://raw.githubusercontent.com/FifthWit/ui/refs/heads/main/public/r/stateful-badge.json

Usage

import { useRef } from "react";
import {
    StatefulBadge,
    type StatefulBadgeHandle,
} from "@/components/stateful-badge";

export function Example() {
    const badgeRef = useRef<StatefulBadgeHandle>(null);

    const handleClick = () => {
        badgeRef.current?.updateState("loading");
        
        // fake async func
        setTimeout(() => {
            badgeRef.current?.updateState("success");
        }, 2000);
    };

    return (
        <div>
            <StatefulBadge initialState="idle" ref={badgeRef} />
            <button onClick={handleClick}>Start</button>
        </div>
    );
}