Status Badge

Component 495

About

Here is Status Badge component

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Status Badge to your project and fits it to your theme.

Code

How Status Badge is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import {
  CircleCheck,
  CircleDashed,
  CircleX,
  Clock5,
  ScanSearch,
  TriangleAlert,
} from "lucide-react";
import React from "react";

const StatusDemo = () => {
  return (
    <div className="flex flex-col items-center justify-center gap-6">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 ">
        <div className="w-40 h-[35px] flex items-center justify-center bg-orange-50 rounded-xl ">
          <h1 className="flex items-center  text-[#EAA65D] font-semibold">
            <TriangleAlert className="w-4 h-4 mr-2" strokeWidth={3} />
            Pending
          </h1>
        </div>
        <div className="w-40 h-[35px] flex items-center justify-center bg-rose-50 rounded-xl ">
          <h1 className="flex items-center  text-[#D57463] font-semibold">
            <CircleX className="w-4 h-4 mr-2" strokeWidth={3} />
            Failed
          </h1>
        </div>
      </div>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 ">
        <div className="w-40 h-[35px] flex items-center justify-center bg-emerald-50 rounded-xl ">
          <h1 className="flex items-center  text-[#57BC6C] font-semibold">
            <CircleCheck className="w-4 h-4 mr-2" strokeWidth={3} />
            Success
          </h1>
        </div>
        <div className="w-40 h-[35px] flex items-center justify-center bg-sky-100 rounded-xl ">
          <h1 className="flex items-center  text-[#008AF5] font-semibold">
            <CircleDashed className="w-4 h-4 mr-2" strokeWidth={3} />
            In progress
          </h1>
        </div>{" "}
        <div className="w-40 h-[35px] flex items-center justify-center bg-yellow-50 rounded-xl ">
          <h1 className="flex items-center  text-[#F0B13D] font-semibold">
            <ScanSearch className="w-4 h-4 mr-2" strokeWidth={3} />
            In review
          </h1>
        </div>{" "}
      </div>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div className="w-40 h-[35px] flex items-center justify-center bg-zinc-100 rounded-xl ">
          <h1 className="flex items-center  text-[#777777] font-semibold">
            <Clock5 className="w-4 h-4 mr-2" strokeWidth={3} />
            Expired
          </h1>
        </div>
        <div className="w-40 h-[35px] flex items-center justify-center bg-violet-50 rounded-xl ">
          <h1 className="flex items-center  text-[#6C3CF0] font-semibold">
            <Clock5 className="w-4 h-4 mr-2" strokeWidth={3} />
            Submited
          </h1>
        </div>
      </div>
    </div>
  );
};

export default StatusDemo;