import { Badge } from "@/components/reui/badge"
export function Pattern() {Installation
pnpm dlx shadcn@latest add @reui/r-badge
Usage
import { Badge } from "@/components/reui/r-badge"<Badge>Badge</Badge>Examples
Secondary
import { Badge } from "@/components/reui/badge"
export function Pattern() {Destructive
import { Badge } from "@/components/reui/badge"
export function Pattern() {Success
import { Badge } from "@/components/reui/badge"
export function Pattern() {Info
import { Badge } from "@/components/reui/badge"
export function Pattern() {Warning
import { Badge } from "@/components/reui/badge"
export function Pattern() {Outline
import { Badge } from "@/components/reui/badge"
export function Pattern() {Primary Outline
import { Badge } from "@/components/reui/badge"
export function Pattern() {Destructive Outline
import { Badge } from "@/components/reui/badge"
export function Pattern() {Info Outline
import { Badge } from "@/components/reui/badge"
export function Pattern() {Success Outline
import { Badge } from "@/components/reui/badge"
export function Pattern() {Warning Outline
import { Badge } from "@/components/reui/badge"
export function Pattern() {Primary Light
import { Badge } from "@/components/reui/badge"
export function Pattern() {Destructive Light
import { Badge } from "@/components/reui/badge"
export function Pattern() {Success Light
import { Badge } from "@/components/reui/badge"
export function Pattern() {Info Light
import { Badge } from "@/components/reui/badge"
export function Pattern() {Warning Light
import { Badge } from "@/components/reui/badge"
export function Pattern() {Invert Light
Component p-badge-17-1 not found in registry.
Size
import { Badge } from "@/components/reui/badge"
export function Pattern() {Full Radius
import { Badge } from "@/components/reui/badge"
export function Pattern() {With Icon
import { Badge } from "@/components/reui/badge"
import { CheckIcon } from 'lucide-react'
With Icon Button
import { Badge } from "@/components/reui/badge"
import { Button } from "@/components/ui/button"With Dot
import { Badge } from "@/components/reui/badge"
export function Pattern() {With Link
import Link from "next/link"
import { Badge } from "@/components/reui/badge"
API Reference
This component follows the same API design as the Badge Component from shadcn/ui.
The key difference is that it uses extended color tokens such as --success, --info, --warning and --invert
for badge variants instead of utility classes.
This approach enables consistent, reusable state variants across the project without relying on custom Tailwind color utilities.
<Badge variant="success-light" size="sm">
Success
</Badge>Props
| Prop | Type |
|---|---|
variant | "default" | "secondary" | "destructive" | "outline" | "info" | "success" | "warning" | "invert" |
variant (Outline) | "primary-outline" | "warning-outline" | "success-outline" | "info-outline" | "destructive-outline" | "invert-outline" |
variant (Light) | "primary-light" | "warning-light" | "success-light" | "info-light" | "destructive-light" | "invert-light" |
size | "default" | "xs" | "sm" | "lg" | "xl" |
On This Page