Badge
Displays a badge or a component that looks like a badge.
Preview
Badge
import { Badge } from "@/components/ui/Badge"
export function BadgeDemo() {
return <Badge>Badge</Badge>
}Variants
Loading...
import { Badge } from "@/components/ui/Badge"
export function BadgeDemoVariants() {
return (
<div className="flex flex-wrap gap-1">
<Badge>Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="destructive">Destructive</Badge>
<Badge variant="outline">Outline</Badge>
</div>
)
}Status
variant="destructive" is the same danger fill as status="danger". Use status for semantic state and variant for chrome. destructive stays as the variant alias.
Loading...
import { Badge } from "@/components/ui/Badge"
export function BadgeDemoStatus() {
return (
<div className="flex flex-wrap gap-1">
<Badge status="success">Success</Badge>
<Badge status="warning">Warning</Badge>
<Badge status="danger">Danger</Badge>
<Badge status="info">Info</Badge>
</div>
)
}Installation
Make sure that namespace is set in your component.json file. Namespace docs: Learn more about namespaces
pnpm dlx shadcn@latest add @aura/badgeManual
Install the following dependencies:
pnpm install @radix-ui/react-slot class-variance-authorityCopy and paste the class names utility into your utils/class-names.ts file.
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
Copy and paste the Badge component into your components/ui/Badge.tsx file.
/**
* @description Displays a badge or a component that looks like a badge.
*/
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/utils/class-names"
/**
* Danger fill shared by `variant="destructive"` and `status="danger"`.
* `destructive` is the variant alias of the danger status. Prefer `status`
* for semantic state and `variant` for chrome (default, secondary, outline).
*/
const badgeDanger =
"border-transparent bg-danger text-danger-contrast hover:bg-danger/80"
const badgeVariants = cva(
// 13px scale: px-1 is 13px (replaces px-2.5 / 32.5px). py-0.5 is 6.5px
// and gap-0.5 is the icon gap. With .xs (12/16) and a 1px border the
// badge is 16 + 13 + 2 = 31px tall.
"inline-flex items-center gap-0.5 rounded-full border px-1 py-0.5 xs transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-a8 motion-reduce:transition-none",
{
variants: {
variant: {
default:
"border-transparent bg-gray-12 text-gray-1 hover:bg-gray-12/80",
secondary:
"border-transparent bg-gray-3 text-gray-12 hover:bg-gray-3/80",
destructive: badgeDanger,
outline: "border-gray-12 text-gray-12",
},
status: {
default: "",
success: "border-transparent bg-success text-success-contrast hover:bg-success/80",
warning: "border-transparent bg-warning text-warning-contrast hover:bg-warning/80",
danger: badgeDanger,
info: "border-transparent bg-info text-info-contrast hover:bg-info/80",
}
},
defaultVariants: {
variant: "default",
status: "default",
},
}
)
export interface BadgeProps
extends React.HTMLAttributes<HTMLDivElement>,
VariantProps<typeof badgeVariants> {
asChild?: boolean
}
const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(
({ className, variant, status, asChild = false, ...props }, ref) => {
const Comp = asChild ? Slot : "div"
return (
<Comp
className={cn(badgeVariants({ variant, status }), className)}
ref={ref}
{...props}
/>
)
}
)
Badge.displayName = "Badge"
export { Badge, badgeVariants }