The StatusButton component is a versatile and fully configurable button built with shadcn UI that visually represents real-time status using a small animated dot. It supports multiple statuses such as live, idle, offline, or any custom status, with configurable colors, dot sizes, and pulse animation speed. The component allows developers to attach callbacks for interactive actions, making it suitable for “Go Live,” activity indicators, or dashboard monitoring. Its smooth, pulsing animation enhances user experience, while the flexible API ensures it can adapt to a wide range of applications. The accompanying demo page showcases multiple variations, demonstrating its flexibility in both style and functionality.
"use client"
import StatusButton from "@/components/ui/status-button"
export default function StatusButtonDemo() {
const customColors = {
live: "bg-green-600",
idle: "bg-yellow-500",
offline: "bg-red-600",
custom: "bg-purple-500",
}
return (
<div className="p-6 grid gap-4 sm:grid-cols-2 md:grid-cols-3">
<StatusButton
label="Live Now"
status="live"
onClick={() => console.log("Live clicked!")}
/>
<StatusButton
label="Idle"
status="idle"
onClick={() => console.log("Idle clicked!")}
size={14}
/>
<StatusButton
label="Offline"
status="offline"
onClick={() => console.log("Offline clicked!")}
pulseDuration={0.8}
/>
<StatusButton
label="Custom Status"
status="custom"
colors={customColors}
size={16}
pulseDuration={1.5}
onClick={() => console.log("Custom clicked!")}
/>
<StatusButton
label="Small Dot"
status="live"
size={8}
pulseDuration={0.5}
/>
<StatusButton
label="Big Dot"
status="idle"
size={20}
pulseDuration={1.2}
/>
</div>
)
}
Part of Ruixen UI — browse the full library on 21st.dev.