Docs
Badge
Badge
Displays a badge or a component that looks like a badge.
import { Badge } from "@repo/tailwindcss/default/badge";
const BadgeDemo = () => {
return <Badge>Badge</Badge>;
};
export default BadgeDemo;import { Badge } from "@repo/tailwindcss/solid/badge";
const BadgeDemo = () => {
return <Badge>Badge</Badge>;
};
export default BadgeDemo;Installation
Copy and paste the following code into your project:
Copy and paste the following code into your project:
npx shadcn-solid@latest add badgeUsage
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
Secondary
import { Badge } from "@repo/tailwindcss/default/badge";
const BadgeSecondary = () => {
return <Badge variant="secondary">Secondary</Badge>;
};
export default BadgeSecondary;import { Badge } from "@repo/tailwindcss/solid/badge";
const BadgeSecondary = () => {
return <Badge variant="secondary">Secondary</Badge>;
};
export default BadgeSecondary;Destructive
Destructive
import { Badge } from "@repo/tailwindcss/default/badge";
const BadgeDestructive = () => {
return <Badge variant="destructive">Destructive</Badge>;
};
export default BadgeDestructive;import { Badge } from "@repo/tailwindcss/solid/badge";
const BadgeDestructive = () => {
return <Badge variant="destructive">Destructive</Badge>;
};
export default BadgeDestructive;Outline
Outline
import { Badge } from "@repo/tailwindcss/default/badge";
const BadgeOutline = () => {
return <Badge variant="outline">Outline</Badge>;
};
export default BadgeOutline;import { Badge } from "@repo/tailwindcss/solid/badge";
const BadgeOutline = () => {
return <Badge variant="outline">Outline</Badge>;
};
export default BadgeOutline;