Badge

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

DefaultSecondaryDestructiveOutlineSuccessInfo
"use client";

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

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

npx shadcn@latest add https://roiui.com/r/badge.json
Success
"use client";

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

export default function BadgeSuccess() {
  return (
    <div className={styles.badgeBounce}>
      <Badge size="lg" variant="success">
        <BadgeIcon>
          <svg
            aria-hidden="true"
            className={styles.checkIcon}
            fill="none"
            height="16"
            stroke="currentColor"
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="2"
            viewBox="0 0 16 16"
            width="16"
          >
            <path
              className={styles.checkPath}
              d="m3 8 3 3 7-7"
              pathLength="1"
            />
          </svg>
        </BadgeIcon>
        Success
      </Badge>
    </div>
  );
}
Error
"use client";

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

export default function BadgeError() {
  return (
    <div className={styles.badgeShake}>
      <Badge size="lg" variant="destructive">
        <BadgeIcon>
          <svg
            aria-hidden="true"
            fill="none"
            height="16"
            stroke="currentColor"
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="2"
            viewBox="0 0 24 24"
            width="16"
          >
            <circle cx="12" cy="12" r="10" />
            <path
              className={styles.iconPath}
              d="m4.9 4.9 14.2 14.2"
              pathLength="1"
            />
          </svg>
        </BadgeIcon>
        Error
      </Badge>
    </div>
  );
}
anatomy
<Badge>Badge text</Badge>
Avatar
Button

On This Page