Cycle Status Button
Multi-state status pill button cycling through To Do → In Progress → Review → Done with smooth spring transitions.
ReactTailwind CSSFramer Motion
Dependenciesframer-motion, lucide-react
npm install framer-motion lucide-reactPreview
Click to cycle status
Source Code
cycle-status-button.tsxtsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
"use client";
import React, { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { Circle, Clock, Eye, CheckCircle2 } from "lucide-react";
export type StatusType = "todo" | "in_progress" | "review" | "done";
export function CycleStatusButton({
initialStatus = "todo",
onStatusChange,
}: {
initialStatus?: StatusType;
onStatusChange?: (status: string) => void;
}) {
return (
<button className="inline-flex items-center gap-2.5 px-3.5 py-1.5 rounded-full text-xs font-medium border shadow-xs">
Cycle Status
</button>
);
}Usage
usage.tsxtsx
1
2
3
4
<CycleStatusButton
initialStatus="todo"
onStatusChange={(status) => console.log(status)}
/>Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| initialStatus | "todo" | "in_progress" | "review" | "done" | Optional | "todo" | Initial starting stage of the status pill. |
| onStatusChange | (status: StatusConfig) => void | Optional | undefined | Event triggered whenever user advances to the next state. |
Types
types.tstsx
1
export type StatusType = "todo" | "in_progress" | "review" | "done";