Stateful Badge
An animated badge component that transitions smoothly between different states.
import { useRef, useState } from "react";
import {
StatefulBadge,
type StatefulBadgeHandle,
type stateTypes,
} from "@/components/stateful-badge";
export function StatefulBadgeDemo() {
const badgeRef = useRef<StatefulBadgeHandle>(null);
const [currentState, setCurrentState] = useState<stateTypes>("idle");
const handleUpdateState = (state: typeof currentState) => {
badgeRef.current?.updateState(state);
setCurrentState(state);
};
return (
<div className="flex flex-col items-center">
<StatefulBadge initialState="idle" ref={badgeRef} />
<div className="flex flex-row border rounded-xl p-1">
{(["idle", "loading", "error", "success", "warning"] as const).map(
(state) => (
<button
data-enabled={currentState === state}
key={state}
type="button"
className="bg-secondary border text-secondary-foreground p-2 m-1 rounded-lg data-[enabled=true]:hover:cursor-not-allowed data-[enabled=true]:bg-primary data-[enabled=true]:text-primary-foreground hover:cursor-pointer transition-all duration-100 ease-out active:scale-94"
onClick={() => handleUpdateState(state)}
>
{state.charAt(0).toUpperCase() + state.slice(1)}
</button>
),
)}
</div>
</div>
);
}Installation
npx shadcn@latest add https://raw.githubusercontent.com/FifthWit/ui/refs/heads/main/public/r/stateful-badge.jsonpnpm dlx shadcn@latest add https://raw.githubusercontent.com/FifthWit/ui/refs/heads/main/public/r/stateful-badge.jsondeno run -A npm:shadcn@latest add https://raw.githubusercontent.com/FifthWit/ui/refs/heads/main/public/r/stateful-badge.jsonbunx shadcn@latest add https://raw.githubusercontent.com/FifthWit/ui/refs/heads/main/public/r/stateful-badge.jsonUsage
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>
);
}API Reference
StatefulBadge
Prop
Type
StatefulBadgeHandle
The ref exposes the following method:
Prop
Type
State Types
The badge's supported states are: idle, loading, success, warning, and error