import * as React from "react"

import { cn } from "@/lib/utils"

type StatusBadgeStatus = "success" | "warning" | "error" | "info" | "pending"

type StatusBadgeSize = "sm" | "md"

interface StatusBadgeProps extends React.HTMLAttributes<HTMLDivElement> {
  status: StatusBadgeStatus
  label: string
  size?: StatusBadgeSize
}

const statusStyles: Record<StatusBadgeStatus, string> = {
  success: "text-primary",
  warning: "text-foreground",
  error: "text-destructive",
  info: "text-muted-foreground",
  pending: "text-muted-foreground",
}

const sizeStyles: Record<StatusBadgeSize, string> = {
  sm: "text-xs px-2.5 py-0.5",
  md: "text-sm px-3 py-1",
}

function StatusBadge({ status, label, size = "md", className, ...props }: StatusBadgeProps) {
  return (
    <div
      className={cn(
        "inline-flex items-center gap-2 rounded-full border border-border bg-muted font-medium text-foreground",
        sizeStyles[size],
        className
      )}
      {...props}
    >
      <span className={cn("flex items-center", statusStyles[status])}>
        <span className="h-2.5 w-2.5 rounded-full bg-current" />
      </span>
      <span>{label}</span>
    </div>
  )
}

export { StatusBadge }
export type { StatusBadgeProps, StatusBadgeStatus, StatusBadgeSize }
Status Badge

Dependencies

Files

Installation
