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

import { cn } from '@/lib/utils';
import { type VariantProps, cva } from 'class-variance-authority';
import * as React from 'react';

const badgeVariants = cva(
  'inline-flex items-center rounded-md border px-2 py-0.5 text-xs font-medium transition-all duration-300',
  {
    variants: {
      variant: {
        default: 'border-transparent bg-primary text-primary-foreground',
        secondary: 'border-transparent bg-secondary text-secondary-foreground',
        outline: 'text-foreground',
        new: 'relative border-blue-400/60 bg-blue-100 text-blue-700 dark:border-blue-500/60 dark:bg-blue-900/60 dark:text-blue-300 shadow-[0_0_12px_rgba(59,130,246,0.25)] dark:shadow-[0_0_18px_rgba(59,130,246,0.2)] animate-pulse',
      },
    },
    defaultVariants: {
      variant: 'default',
    },
  },
);

export function Badge({
  className,
  variant,
  ...props
}: React.ComponentProps<'div'> & VariantProps<typeof badgeVariants>) {
  return (
    <div
      data-slot="badge"
      className={cn(badgeVariants({ variant }), className)}
      {...props}
    />
  );
}
Badge

Installation

Dependencies

NPM Packages

Registry Components
