Badge

A small status descriptor for UI elements, commonly used for external links and labels.

"use client";

import { Badge } from "@/components/ui/badge/badge";
import Link from "next/link";
import styles from "./badge-demo.module.css";

export default function BadgeDemo() {
  return (
    <div className={styles.container}>
      <Link href="https://base-ui.com" target="_blank" rel="noopener noreferrer">
        <Badge>
          Documentation <span>↗</span>
        </Badge>
      </Link>
      <Link href="https://github.com" target="_blank" rel="noopener noreferrer">
        <Badge variant="secondary">
          GitHub <span>↗</span>
        </Badge>
      </Link>
    </div>
  );
}

Installation

npx shadcn@latest add https://roiui.com/r/badge.json

Anatomy

anatomy

import { Badge } from '../ui/badge'

<Badge>Badge text</Badge>

Examples

Variants

DefaultSecondaryDestructiveOutline

"use client";

import { Badge } from "@/components/ui/badge/badge";
import styles from "./badge-variants.module.css";

export default function BadgeVariants() {
  return (
    <div className={styles.container}>
      <Badge variant="default">Default</Badge>
      <Badge variant="secondary">Secondary</Badge>
      <Badge variant="destructive">Destructive</Badge>
      <Badge variant="outline">Outline</Badge>
    </div>
  );
}

Motion Error

Error

badge-error-motion.tsx

"use client";

import { Badge, BadgeIcon } from "@/components/ui/badge/badge";
import { motion } from "motion/react";

const shakeVariants = {
  shake: {
    x: [-4, 4, 0, -4, 0],
  },
};

const shakeTransition = {
  duration: 0.3,
};

const iconVariants = {
  hidden: {
    pathLength: 0,
    opacity: 0,
  },
  visible: {
    pathLength: 1,
    opacity: 1,
  },
};

const iconTransition = {
  duration: 0.4,
  ease: "easeIn" as const,
};

export default function BadgeErrorFramerMotion() {
  return (
    <motion.div variants={shakeVariants} animate="shake" transition={shakeTransition}>
      <Badge variant="destructive" size="lg">
        <BadgeIcon>
          <motion.svg
            width="16"
            height="16"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
            initial="hidden"
            animate="visible"
          >
            <motion.circle cx="12" cy="12" r="10" />
            <motion.path d="m4.9 4.9 14.2 14.2" variants={iconVariants} transition={iconTransition} />
          </motion.svg>
        </BadgeIcon>
        Error
      </Badge>
    </motion.div>
  );
}

Motion Success

Success

badge-success-motion.tsx

"use client";

import { Badge, BadgeIcon } from "@/components/ui/badge/badge";
import { motion } from "motion/react";

const bounceVariants = {
  bounce: {
    scale: [0.8, 1.05, 1],
  },
};

const bounceTransition = {
  duration: 0.4,
};

const checkVariants = {
  hidden: {
    pathLength: 0,
    opacity: 0,
  },
  visible: {
    pathLength: 1,
    opacity: 1,
  },
};

const checkTransition = {
  duration: 0.4,
  ease: "easeInOut" as const,
};

export default function BadgeSuccessFramerMotion() {
  return (
    <motion.div variants={bounceVariants} animate="bounce" transition={bounceTransition}>
      <Badge variant="success" size="lg">
        <BadgeIcon>
          <motion.svg
            width="16"
            height="16"
            viewBox="0 0 16 16"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
            initial="hidden"
            animate="visible"
          >
            <motion.path d="m3 8 3 3 7-7" variants={checkVariants} transition={checkTransition} />
          </motion.svg>
        </BadgeIcon>
        Success
      </Badge>
    </motion.div>
  );
}