Docs
Badge
Badge
Displays a badge or a component that looks like a badge.
import { Badge } from "@repo/tailwindcss/ui/badge";
const BadgeDemo = () => {
return <Badge>Badge</Badge>;
};
export default BadgeDemo;Installation
npx shadcn-solid@latest add badgeCopy and paste the following code into your project:
import { cn } from "@/libs/cn";
import type { VariantProps } from "class-variance-authority";
import { cva } from "class-variance-authority";
import { type ComponentProps, splitProps } from "solid-js";
export const badgeVariants = cva(
"inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-shadow focus-visible:outline-none focus-visible:ring-[1.5px] focus-visible:ring-ring",
{
variants: {
variant: {
default:
"border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
secondary:
"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
destructive:
"border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
outline: "text-foreground",
},
},
defaultVariants: {
variant: "default",
},
},
);
export const Badge = (
props: ComponentProps<"div"> & VariantProps<typeof badgeVariants>,
) => {
const [local, rest] = splitProps(props, ["class", "variant"]);
return (
<div
class={cn(
badgeVariants({
variant: local.variant,
}),
local.class,
)}
{...rest}
/>
);
};Copy and paste the following code into your project:
import { cn } from "@/libs/cn";
import type { VariantProps } from "class-variance-authority";
import { cva } from "class-variance-authority";
import { type ComponentProps, splitProps } from "solid-js";
export const badgeVariants = cva(
"inline-flex items-center rounded-md px-2.5 py-0.5 text-xs font-semibold transition-shadow focus-visible:(outline-none ring-1.5 ring-ring)",
{
variants: {
variant: {
default:
"bg-primary text-primary-foreground shadow hover:bg-primary/80",
secondary:
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
destructive:
"bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
outline: "border text-foreground",
},
},
defaultVariants: {
variant: "default",
},
},
);
export const Badge = (
props: ComponentProps<"div"> & VariantProps<typeof badgeVariants>,
) => {
const [local, rest] = splitProps(props, ["class", "variant"]);
return (
<div
class={cn(
badgeVariants({
variant: local.variant,
}),
local.class,
)}
{...rest}
/>
);
};Usage
import { Badge } from "@/components/ui/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/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
import { Badge } from "@repo/tailwindcss/ui/badge";
const BadgeSecondary = () => {
return <Badge variant="secondary">Secondary</Badge>;
};
export default BadgeSecondary;Destructive
import { Badge } from "@repo/tailwindcss/ui/badge";
const BadgeDestructive = () => {
return <Badge variant="destructive">Destructive</Badge>;
};
export default BadgeDestructive;Outline
import { Badge } from "@repo/tailwindcss/ui/badge";
const BadgeOutline = () => {
return <Badge variant="outline">Outline</Badge>;
};
export default BadgeOutline;