Badge
Usage
import { Badge } from '~/components/badge';
import { Badge } from '~/components/badge';
<Badge variant="outline">Badge</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/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