Docs
Badge

Badge

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

Installation

Usage

import { Badge } from "@/components/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 "@/components/ui/badge";
<A class={badgeVariants({ variant: "outline" })}>Click here</A>

Alternatively, you can set the asChild parameter and nest the link component.

<Badge asChild>
  <As component={A} href="#">
    Login
  </As>
</Badge>

Examples

Secondary

Destructive

Outline