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 @roiui/badge
npx shadcn@latest add @roiui/badge-tailwind

anatomy
<Badge>Badge text</Badge>

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>
  );
}

Component props

Prop
Type
Default

Component props

Prop
Type
Default