Status Badge

Component 645

About

Status Badge inspired by Tremor

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 { StatusBadge } from "@/components/ui/status-badge"
import {
  RiCheckboxCircleFill,
  RiCloseCircleFill,
  RiCloseCircleLine,
  RiShieldCheckLine,
} from '@remixicon/react'

export function StatusBadgeDemo() {
  return (
    <div className="flex flex-wrap justify-center gap-4">
      <StatusBadge 
        leftIcon={RiShieldCheckLine}
        rightIcon={RiCloseCircleLine}
        leftLabel="Protection"
        rightLabel="SSO login"
        status="success"
      />
      <StatusBadge 
        leftIcon={RiCheckboxCircleFill}
        rightIcon={RiCloseCircleLine}
        leftLabel="Live"
        rightLabel="Audit trails"
        status="success"
      />
      <StatusBadge 
        leftIcon={RiCloseCircleFill}
        rightIcon={RiShieldCheckLine}
        leftLabel="Safety checks"
        rightLabel="Production"
        status="error"
      />
    </div>
  )
}