Components
Badge

Badge

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

Badge

Usage

import { Badge } from '~/components/badge';
import { Badge } from '~/components/badge';
<Badge variant="outline">Badge</Badge>
<Badge variant="outline">Badge</Badge>

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

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

Examples

Default

Badge

Secondary

Secondary

Outline

Outline

Destructive

Destructive