Components
Status Badge A versatile badge component designed to visually represent various workflow states such as 'Draft', 'In-progress', 'In-review', and 'Completed'. It features distinct icons, colors, and subtle animations for each status, ensuring clarity and a modern user experience.
Loading preview...
import { StatusBadge } from "@/components/ui/status-badge";
const StatusBadgeDemo = () => {
return (
<div className="flex min-h-[250px] w-full flex-col items-center justify-center gap-6 rounded-lg bg-background p-8 md:flex-row">
{/* Draft Status */}
<StatusBadge status="draft" />
{/* In-progress Status */}
<StatusBadge status="in-progress" />
{/* In-review Status */}
<StatusBadge status="in-review" />
{/* Completed Status */}
<StatusBadge status="completed" />
</div>
);
};
export default StatusBadgeDemo;