Badge

import { Badge } from "@/components/ui/badge";

export default function BasicBadge() {
  return (
    <>
      <Badge>Badge</Badge>
      <Badge variant="secondary">Secondary</Badge>
      <Badge variant="outline">Outline</Badge>
      <Badge variant="destructive">Destructive</Badge>
    </>
  );
}

import { Badge } from "@/components/ui/badge";

export default function WithDot() {
  return (
    <>
      <Badge>
        <span className="-ml-0.5 mr-1 size-1.5 shrink-0 rounded-full bg-current"></span>
        Badge
      </Badge>
      <Badge variant="secondary">
        <span className="-ml-0.5 mr-1 size-1.5 shrink-0 rounded-full bg-current"></span>
        Secondary
      </Badge>
      <Badge variant="outline">
        <span className="-ml-0.5 mr-1 size-1.5 shrink-0 rounded-full bg-current"></span>
        Outline
      </Badge>
      <Badge variant="destructive">
        <span className="-ml-0.5 mr-1 size-1.5 shrink-0 rounded-full bg-current"></span>
        Destructive
      </Badge>
    </>
  );
}

import { Badge } from "@/components/ui/badge";
import { X } from "@mynaui/icons-react";

export default function WithClose() {
  return (
    <>
      <Badge>
        Badge
        <button className="group -mr-0.5 ml-1 shrink-0 rounded-full">
          <X className="size-3 stroke-current" />
        </button>
      </Badge>
      <Badge variant="secondary">
        Secondary
        <button className="group -mr-0.5 ml-1 shrink-0 rounded-full">
          <X className="size-3 stroke-current" />
        </button>
      </Badge>
      <Badge variant="outline">
        Outline
        <button className="group -mr-0.5 ml-1 shrink-0 rounded-full">
          <X className="size-3 stroke-current" />
        </button>
      </Badge>
      <Badge variant="destructive">
        Destructive
        <button className="group -mr-0.5 ml-1 shrink-0 rounded-full">
          <X className="size-3 stroke-current" />
        </button>
      </Badge>
    </>
  );
}

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { X } from "@mynaui/icons-react";

interface User {
  id: number;
  name: string;
  image: string;
}

const users: User[] = [
  {
    id: 1,
    name: "Alessandro",
    image: "/avatars/avatar-05.jpg",
  },
  {
    id: 2,
    name: "Jane Smith",
    image: "/avatars/avatar-06.jpg",
  },
  {
    id: 3,
    name: "Alex Johnson",
    image: "/avatars/avatar-07.jpg",
  },
];

export default function Badge4() {
  return (
    <div className="flex flex-wrap gap-2">
      {users.map((user) => (
        <Badge
          key={user.id}
          variant="outline"
          className="flex items-center gap-1 pl-0.5 pr-1.5"
        >
          <Avatar className="size-5">
            <AvatarImage src={user.image} alt={user.name} />
            <AvatarFallback>
              {user.name
                .split(" ")
                .map((n) => n[0])
                .join("")}
            </AvatarFallback>
          </Avatar>
          <span>{user.name}</span>
          <button>
            <X className="size-3 cursor-pointer stroke-2 opacity-60 hover:opacity-100" />
          </button>
        </Badge>
      ))}
    </div>
  );
}

import { Badge } from "@/components/ui/badge";
import { ArrowDown, ArrowLeft, ArrowUp } from "@mynaui/icons-react";

export default function Badge5() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      {/* Positive Change */}
      <Badge className="bg-green-50 text-green-700 hover:bg-green-50 dark:bg-green-900 dark:text-green-300 dark:hover:bg-green-900">
        <ArrowUp className="stroke-3" />
        9.3%
      </Badge>

      {/* Negative Change */}
      <Badge className="bg-red-50 text-red-700 hover:bg-red-50 dark:bg-red-900 dark:text-red-300 dark:hover:bg-red-900">
        <ArrowDown className="stroke-3" />
        1.9%
      </Badge>

      {/* Neutral Change */}
      <Badge className="bg-muted text-muted-foreground hover:bg-muted">
        <ArrowLeft className="stroke-3" />
        0.6%
      </Badge>

      {/* Large Positive */}
      <Badge className="bg-blue-50 text-blue-700 hover:bg-blue-50 dark:bg-blue-900 dark:text-blue-300 dark:hover:bg-blue-900">
        <ArrowUp className="stroke-3" />
        24.7%
      </Badge>

      {/* Small Negative */}
      <Badge className="bg-orange-50 text-orange-700 hover:bg-orange-50 dark:bg-orange-900 dark:text-orange-300 dark:hover:bg-orange-900">
        <ArrowDown className="stroke-3" />
        0.3%
      </Badge>

      {/* Pill Style */}
      <Badge className="bg-purple-50 text-purple-700 hover:bg-purple-50 dark:bg-purple-900 dark:text-purple-300 dark:hover:bg-purple-900 rounded-full">
        <ArrowUp className="stroke-3" />
        15.2%
      </Badge>

      {/* Outlined Style */}
      <Badge
        variant="outline"
        className="border-indigo-200 text-indigo-700 dark:border-indigo-700 dark:text-indigo-300"
      >
        <ArrowUp className="stroke-3" />
        7.8%
      </Badge>

      {/* Solid Background */}
      <Badge className="bg-teal-600 text-white hover:bg-teal-600 dark:bg-teal-400 dark:text-black dark:hover:bg-teal-400">
        <ArrowUp className="stroke-3" />
        12.4%
      </Badge>
    </div>
  );
}