Badge

<span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-primary text-primary-foreground">Primary</span>

"use client";

import React, { useState } from "react";

interface BadgePrimaryProps {
  className?: string;
  children?: React.ReactNode;
}

export default function BadgePrimary({
  className = "",
  children,
}: BadgePrimaryProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-primary text-primary-foreground">Primary</span>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedBadgePrimary() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-primary text-primary-foreground">Primary</span>
    </motion.div>
  );
}

<span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-muted text-muted-foreground">Secondary</span>

"use client";

import React, { useState } from "react";

interface BadgeSecondaryProps {
  className?: string;
  children?: React.ReactNode;
}

export default function BadgeSecondary({
  className = "",
  children,
}: BadgeSecondaryProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-muted text-muted-foreground">Secondary</span>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedBadgeSecondary() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-muted text-muted-foreground">Secondary</span>
    </motion.div>
  );
}

<span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-red-500 text-white">Destructive</span>

"use client";

import React, { useState } from "react";

interface BadgeDestructiveProps {
  className?: string;
  children?: React.ReactNode;
}

export default function BadgeDestructive({
  className = "",
  children,
}: BadgeDestructiveProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-red-500 text-white">Destructive</span>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedBadgeDestructive() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-red-500 text-white">Destructive</span>
    </motion.div>
  );
}

<span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-green-500 text-white">Success</span>

"use client";

import React, { useState } from "react";

interface BadgeSuccessProps {
  className?: string;
  children?: React.ReactNode;
}

export default function BadgeSuccess({
  className = "",
  children,
}: BadgeSuccessProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-green-500 text-white">Success</span>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedBadgeSuccess() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-green-500 text-white">Success</span>
    </motion.div>
  );
}

<span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-yellow-500 text-white">Warning</span>

"use client";

import React, { useState } from "react";

interface BadgeWarningProps {
  className?: string;
  children?: React.ReactNode;
}

export default function BadgeWarning({
  className = "",
  children,
}: BadgeWarningProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-yellow-500 text-white">Warning</span>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedBadgeWarning() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-yellow-500 text-white">Warning</span>
    </motion.div>
  );
}

<span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-blue-500 text-white">Info</span>

"use client";

import React, { useState } from "react";

interface BadgeInfoProps {
  className?: string;
  children?: React.ReactNode;
}

export default function BadgeInfo({
  className = "",
  children,
}: BadgeInfoProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-blue-500 text-white">Info</span>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedBadgeInfo() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-blue-500 text-white">Info</span>
    </motion.div>
  );
}

<span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-purple-500 text-white">Purple</span>

"use client";

import React, { useState } from "react";

interface BadgePurpleProps {
  className?: string;
  children?: React.ReactNode;
}

export default function BadgePurple({
  className = "",
  children,
}: BadgePurpleProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-purple-500 text-white">Purple</span>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedBadgePurple() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-purple-500 text-white">Purple</span>
    </motion.div>
  );
}

<span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-orange-500 text-white">Orange</span>

"use client";

import React, { useState } from "react";

interface BadgeOrangeProps {
  className?: string;
  children?: React.ReactNode;
}

export default function BadgeOrange({
  className = "",
  children,
}: BadgeOrangeProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-orange-500 text-white">Orange</span>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedBadgeOrange() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-orange-500 text-white">Orange</span>
    </motion.div>
  );
}

<span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-pink-500 text-white">Pink</span>

"use client";

import React, { useState } from "react";

interface BadgePinkProps {
  className?: string;
  children?: React.ReactNode;
}

export default function BadgePink({
  className = "",
  children,
}: BadgePinkProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-pink-500 text-white">Pink</span>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedBadgePink() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-pink-500 text-white">Pink</span>
    </motion.div>
  );
}

<span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-teal-500 text-white">Teal</span>

"use client";

import React, { useState } from "react";

interface BadgeTealProps {
  className?: string;
  children?: React.ReactNode;
}

export default function BadgeTeal({
  className = "",
  children,
}: BadgeTealProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-teal-500 text-white">Teal</span>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedBadgeTeal() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-teal-500 text-white">Teal</span>
    </motion.div>
  );
}

<span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold border border-primary text-primary">Primary Outline</span>

"use client";

import React, { useState } from "react";

interface BadgeOutlinePrimaryProps {
  className?: string;
  children?: React.ReactNode;
}

export default function BadgeOutlinePrimary({
  className = "",
  children,
}: BadgeOutlinePrimaryProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold border border-primary text-primary">Primary Outline</span>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedBadgeOutlinePrimary() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold border border-primary text-primary">Primary Outline</span>
    </motion.div>
  );
}

<span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold border border-muted-foreground text-muted-foreground">Secondary Outline</span>

"use client";

import React, { useState } from "react";

interface BadgeOutlineSecondaryProps {
  className?: string;
  children?: React.ReactNode;
}

export default function BadgeOutlineSecondary({
  className = "",
  children,
}: BadgeOutlineSecondaryProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold border border-muted-foreground text-muted-foreground">Secondary Outline</span>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedBadgeOutlineSecondary() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold border border-muted-foreground text-muted-foreground">Secondary Outline</span>
    </motion.div>
  );
}

<span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold border border-red-500 text-red-500">Destructive Outline</span>

"use client";

import React, { useState } from "react";

interface BadgeOutlineDestructiveProps {
  className?: string;
  children?: React.ReactNode;
}

export default function BadgeOutlineDestructive({
  className = "",
  children,
}: BadgeOutlineDestructiveProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold border border-red-500 text-red-500">Destructive Outline</span>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedBadgeOutlineDestructive() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold border border-red-500 text-red-500">Destructive Outline</span>
    </motion.div>
  );
}

<span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold border border-green-500 text-green-500">Success Outline</span>

"use client";

import React, { useState } from "react";

interface BadgeOutlineSuccessProps {
  className?: string;
  children?: React.ReactNode;
}

export default function BadgeOutlineSuccess({
  className = "",
  children,
}: BadgeOutlineSuccessProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold border border-green-500 text-green-500">Success Outline</span>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedBadgeOutlineSuccess() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold border border-green-500 text-green-500">Success Outline</span>
    </motion.div>
  );
}

<span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold border border-yellow-500 text-yellow-500">Warning Outline</span>

"use client";

import React, { useState } from "react";

interface BadgeOutlineWarningProps {
  className?: string;
  children?: React.ReactNode;
}

export default function BadgeOutlineWarning({
  className = "",
  children,
}: BadgeOutlineWarningProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold border border-yellow-500 text-yellow-500">Warning Outline</span>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedBadgeOutlineWarning() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold border border-yellow-500 text-yellow-500">Warning Outline</span>
    </motion.div>
  );
}