Reddot UI Library

Docs
Badge

Badge

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

Installation

$npx shadcn@latest add https://reddot.dottools.xyz/r/badge.json

Utilisation

import { Badge } from "@/components/ui/badge"
 
export function BadgeDemo() {
  return <Badge>Badge</Badge>
}

Variantes

import { Badge } from "@/components/ui/badge"
 
export function BadgeVariants() {
  return (
    <div className="flex gap-2">
      <Badge variant="default">Default</Badge>
      <Badge variant="secondary">Secondary</Badge>
      <Badge variant="destructive">Destructive</Badge>
      <Badge variant="outline">Outline</Badge>
    </div>
  )
}

Comme lien

import { Badge } from "@/components/ui/badge"
import Link from "next/link"
 
export function BadgeAsChild() {
  return (
    <Badge asChild>
      <Link href="#">Badge Link</Link>
    </Badge>
  )
}

API Reference

Badge

PropTypeDefaultDescription
variant"default" | "secondary" | "destructive" | "outline""default"The variant of the badge
asChildbooleanfalseChange the component to the HTML tag or custom component of the next child.

Dépendances

Ce composant nécessite les dépendances suivantes :

  • @radix-ui/react-slot

Notes

  • Ce composant UI fait partie du système de design
  • Respecte les conventions de style et d'accessibilité
  • Supporte plusieurs variantes de couleur
  • Peut être utilisé avec asChild pour transformer d'autres composants
  • Parfait pour les étiquettes, statuts, et compteurs