Badge - Toolify

You only have access to FOUR variants: default, secondary, outline, and destructive

Code

import { Badge } from "@trytoolify/ui/badge";

export function BadgeDemo() {
    return <Badge>Badge</Badge>;
}

import { Badge } from "@trytoolify/ui/badge";

<Badge variant="outline">Badge</Badge>

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

import { badgeVariants } from "@trytoolify/ui/badge";

<Link className={badgeVariants({ variant: "outline" })}>Badge</Link>

import { Badge } from "@trytoolify/ui/badge";

export function BadgeDemo() {
    return <Badge>Badge</Badge>;
}

import { Badge } from "@trytoolify/ui/badge";

export function BadgeSecondary() {
    return <Badge variant="secondary">Secondary</Badge>;
}

import { Badge } from "@trytoolify/ui/badge";

export function BadgeOutline() {
    return <Badge variant="outline">Outline</Badge>;
}

import { Badge } from "@trytoolify/ui/badge";

export function BadgeDestructive() {
    return <Badge variant="destructive">Destructive</Badge>;
}