Badge

import { Badge } from "@polyui/react/badge"
export function BadgeVariants() {
  return (
    <div className="flex flex-wrap gap-2">
      <Badge variant="default">Default</Badge>
      <Badge variant="secondary">Secondary</Badge>
      <Badge variant="outline">Outline</Badge>
      <Badge variant="destructive">Destructive</Badge>
    </div>
  )
}

import { Badge } from "@polyui/react/badge"
export function BadgeSizes() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Badge size="small">Small</Badge>
      <Badge>Default</Badge>
      <Badge size="large">Large</Badge>
      <Badge className="h-5 min-w-5 px-1 tabular-nums">8</Badge>
    </div>
  )
}

import { Badge } from "@polyui/react/badge"
export function BadgeShape() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Badge className="rounded-sm">Rounded</Badge>
      <span className="inline-flex w-fit shrink-0 items-center justify-center gap-1 px-2 py-0.5 text-xs font-medium whitespace-nowrap">
        <span className="bg-primary size-2 rounded-full" aria-hidden="true" />
        Dot Badge
      </span>
    </div>
  )
}

import { Badge } from "@polyui/react/badge"
import { StarIcon, ArrowRightIcon, CheckCircleIcon, BanIcon } from "lucide-react"
export function BadgeWithIcons() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Badge>
        <StarIcon className="size-3" />
        With Icon
      </Badge>
      <Badge render={<a href="#" />}>
        Link <ArrowRightIcon className="size-3" />
      </Badge>
      <Badge variant="secondary" className="rounded-sm gap-1">
        <CheckCircleIcon className="size-3 text-green-600 dark:text-green-400" />
        Selected
      </Badge>
      <Badge variant="outline" className="text-destructive border-destructive rounded-sm">
        <BanIcon className="size-3" />
        Failed
      </Badge>
      <Badge
        variant="outline"
        className="rounded-sm border-green-600 text-green-600 dark:border-green-400 dark:text-green-400"
      >
        <CheckCircleIcon className="size-3" />
        Successful
      </Badge>
    </div>
  )
}

import { Badge } from "@polyui/react/badge"
export function BadgeCustomColors() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Badge className="border-transparent bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300">
        Success
      </Badge>
      <Badge className="border-transparent bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300">
        Warning
      </Badge>
      <Badge className="border-transparent bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300">
        Info
      </Badge>
      <Badge className="border-transparent bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-300">
        Beta
      </Badge>
    </div>
  )
}

import { Badge } from "@polyui/react/badge"
export function BadgeGradient() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Badge className="rounded-sm border-transparent bg-gradient-to-r from-indigo-500 to-pink-500 text-white">
        Gradient
      </Badge>
      <div className="flex items-center justify-center rounded-full bg-gradient-to-r from-indigo-500 to-pink-500 p-0.5">
        <Badge className="bg-background text-foreground border-none">Gradient Outline</Badge>
      </div>
    </div>
  )
}

import { Badge } from "@polyui/react/badge"
import { Avatar, AvatarImage, AvatarFallback } from "@polyui/react/avatar"
import { ShoppingCartIcon } from "lucide-react"
export function BadgeWithAvatar() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <Badge variant="outline" className="p-1 pr-2">
        <img
          src="https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-5.png"
          alt="Hallie Richards"
          className="size-6 rounded-full"
        />
        Avatar
      </Badge>
      <div className="relative w-fit">
        <Avatar className="size-9 rounded-sm">
          <AvatarFallback className="rounded-sm">
            <ShoppingCartIcon className="size-5" />
          </AvatarFallback>
        </Avatar>
        <Badge className="absolute -top-2.5 -right-2.5 h-5 min-w-5 px-1 tabular-nums">8</Badge>
      </div>
      <div className="relative w-fit">
        <Avatar className="size-10">
          <AvatarImage src="https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-5.png" alt="Hallie Richards" />
          <AvatarFallback>HR</AvatarFallback>
        </Avatar>
        <span className="border-background absolute -right-0.5 -bottom-0.5 size-3 rounded-full border-2 bg-green-600 dark:bg-green-400">
          <span className="sr-only">Online</span>
        </span>
      </div>
    </div>
  )
}