---
title: Badge
description: Displays a badge or a component that looks like a badge.
---

```tsx
import { Badge } from '@/components/ui/badge';
import { BadgeCheckIcon } from 'lucide-react';

export function BadgeDemo() {
  return (
    <div className='flex flex-col items-center gap-2'>
      <div className='flex w-full flex-wrap gap-2'>
        <Badge>Badge</Badge>
        <Badge variant='secondary'>Secondary</Badge>
        <Badge variant='destructive'>Destructive</Badge>
        <Badge variant='outline'>Outline</Badge>
      </div>
      <div className='flex w-full flex-wrap gap-2'>
        <Badge
          variant='secondary'
          className='bg-blue-500 text-white dark:bg-blue-600'
        >
          <BadgeCheckIcon />
          Verified
        </Badge>
        <Badge className='h-5 min-w-5 rounded-full px-1 font-mono tabular-nums'>
          8
        </Badge>
        <Badge
          className='h-5 min-w-5 rounded-full px-1 font-mono tabular-nums'
          variant='destructive'
        >
          99
        </Badge>
        <Badge
          className='h-5 min-w-5 rounded-full px-1 font-mono tabular-nums'
          variant='outline'
        >
          20+
        </Badge>
      </div>
    </div>
  );
}
```

## Installation

```bash
npx shadcn@latest add @fab-ui/badge
```

**Install the following dependencies:**

```bash
npm install @base-ui/react
```

**Copy and paste the following code into your project.**

```tsx
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(
  'h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-colors overflow-hidden group/badge',
  {
    variants: {
      variant: {
        default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
        secondary:
          'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',
        destructive:
          'bg-destructive/20 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20',
        outline:
          'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground bg-background dark:bg-input/30 dark:border-input',
        ghost:
          'hover:bg-muted hover:text-muted-foreground 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({ className, variant })),
      },
      props
    ),
    render,
    state: {
      slot: 'badge',
      variant,
    },
  });
}

export { Badge, badgeVariants };
```

**Update the import paths to match your project setup.**

## Usage

```tsx
import { Badge } from "@/components/ui/badge"
```

```tsx
<Badge variant="default | outline | secondary | destructive">Badge</Badge>
```

### Link

You can use the `render` prop to make another component look like a badge. Here's an example of a link that looks like a badge.

```tsx showLineNumbers
import Link from "next/link"

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

export function BadgeLink() {
  return <Badge render={<Link href='/' />}>Badge</Badge>;
}

```