Badge

Displays a badge or a component that looks like a badge.

PrimarySecondarySuccessWarningError

Installation

npx ruma-ui add badge

Usage

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

export default function BadgeDemo() {
  return (
    <div className="flex gap-3">
      <Badge variant="default">Default</Badge>
      <Badge variant="secondary">Secondary</Badge>
      <Badge variant="outline">Outline</Badge>
      <Badge variant="destructive">Destructive</Badge>
    </div>
  );
}

API Reference

PropTypeDefaultDescription
variant"default" | "secondary" | "outline" | "destructive""default"The visual style of the badge.