Get Started
Input
Feedback
Display
Installation
i18n
BadgeSecondaryDestructiveOutline
import { Badge } from "@/components/ui/badge"
export function BadgeDemo() {Installation#
pnpm dlx shadcn@latest add https://ui.tyap.me/r/styles/base/badge.jsonnpx shadcn@latest add https://ui.tyap.me/r/styles/base/badge.jsonyarn dlx shadcn@latest add https://ui.tyap.me/r/styles/base/badge.jsonbunx --bun shadcn@latest add https://ui.tyap.me/r/styles/base/badge.json
Copy and paste the following code into your project.
import { mergeProps } from "@base-ui/react/merge-props"
import { useRender } from "@base-ui/react/use-render"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
const badgeVariants = cva(
[
"inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap",
"rounded-4xl border border-transparent",
"h-5 gap-1 px-2 py-0.5 text-xs font-medium",
"transition-[color,background-color,border-color,box-shadow] duration-150 ease-out",
"focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
"aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
"has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
"[&>svg]:pointer-events-none [&>svg]:size-3",
].join(" "),
{
variants: {
variant: {
default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
secondary:
"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
outline: "border-border bg-input/30 text-foreground [a]:hover:bg-muted",
destructive:
"bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
ghost: "text-foreground hover:bg-muted dark:hover:bg-muted/50",
link: "text-primary underline-offset-4 hover:underline",
},
},
defaultVariants: {
variant: "default",
},
}
)
function Badge({
className,
variant = "default",
render,
...props
}: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
return useRender({
defaultTagName: "span",
props: mergeProps<"span">(
{ className: cn(badgeVariants({ variant }), className) },
props
),
render,
state: { slot: "badge", variant },
})
}
export { Badge, badgeVariants }
Update the import paths to match your project setup.
Usage#
import { Badge } from "@/components/ui/badge"<Badge variant="default | outline | secondary | destructive">Badge</Badge>Examples#
Variants#
Use the variant prop to change the variant of the badge.
DefaultSecondaryDestructiveOutlineGhost
import { Badge } from "@/components/ui/badge"
export function BadgeVariants() {With Icon#
You can render an icon inside the badge. Use data-icon="inline-start" to render the icon on the left and data-icon="inline-end" to render the icon on the right.
VerifiedBookmark
import { BadgeCheck, BookmarkIcon } from "lucide-react"
import { Badge } from "@/components/ui/badge"With Spinner#
You can render a spinner inside the badge. Remember to add the data-icon="inline-start" or data-icon="inline-end" prop to the spinner.
DeletingGenerating
import { Badge } from "@/components/ui/badge"
import { Spinner } from "@/components/ui/spinner"
Link#
Use the render prop to render a link as a badge.
import { ArrowUpRightIcon } from "lucide-react"
import { Badge } from "@/components/ui/badge"Custom Colors#
You can customize the colors of a badge by adding custom classes such as bg-green-50 dark:bg-green-800 to the Badge component.
BlueGreenSkyPurpleRed
import { Badge } from "@/components/ui/badge"
export function BadgeCustomColors() {RTL#
To enable RTL support in shadcn/ui, see the RTL configuration guide.
شارةثانويمدمرمخططمتحققإشارة مرجعية
"use client"
import * as React from "react"API Reference#
Badge#
The Badge component displays a badge or a component that looks like a badge.
| Prop | Type | Default |
|---|---|---|
variant | "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | "default" |
className | string | - |