shadcn-solid

Docs

Badge

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

Installation

pnpm dlx 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>