Badge

Docs

Badge

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

Badge

Installation

npx shadcn-solid@latest add badge

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>