Docs
Badge

Badge

Displays a badge or a component that looks like a badge.

Source
Badge

Installation

Install the following dependencies:

npm install class-variance-authority

Copy and paste the following code into your project.

import { cva, type VariantProps } from 'class-variance-authority';
import clsx from 'clsx';
import { HTMLAttributes } from 'react';
import styles from './styles.module.scss';
 
const badgeVariants = cva(styles.base, {
    variants: {
        variant: {
            default: styles.default,
            secondary: styles.secondary,
            destructive: styles.destructive,
            outline: styles.outline,
        },
    },
    defaultVariants: {
        variant: 'default',
    },
});
 
export interface BadgeProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
 
const Badge = ({ className, variant, ...props }: BadgeProps) => {
    return <div className={clsx(badgeVariants({ variant }), className)} {...props} />;
};
 
export { Badge, badgeVariants };

Update the import paths to match your project setup.

Usage

import { Badge } from '@/components/ui/badge';
<Badge variant='outline'>Badge</Badge>

Link

You can use the badgeVariants helper to create a link that looks like a badge.

import { badgeVariants } from '@/components/ui/badge';
<Link className={badgeVariants({ variant: 'outline' })}>Badge</Link>

Examples

Default

Badge

Secondary

Secondary

Outline

Outline

Destructive

Destructive