Displays a badge or a component that looks like a badge.
1<script lang="ts">
2import { Badge } from "@/components/ui/badge"
3</script>
4
Installation
pnpm dlx sprawlify@latest add badgenpx sprawlify@latest add badgeyarn sprawlify@latest add badgebunx --bun sprawlify@latest add badge
Install the following dependencies:
pnpm add @sprawlify/primitives @sprawlify/sveltenpm install @sprawlify/primitives @sprawlify/svelteyarn add @sprawlify/primitives @sprawlify/sveltebun add @sprawlify/primitives @sprawlify/svelte
Add the following files to your project:
1<script module lang="ts">
2import { cva, type VariantProps } from "class-variance-authority"
3
4export const badgeVariants = cva(
5 "inline-flex items-center justify-center rounded-full border border-transparent px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
6 {
7 variants: {
8 variant: {
9 default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
10 secondary:
11 "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
12 destructive:
13 "bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
14 outline:
15 "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
16 ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
17 link: "text-primary underline-offset-4 [a&]:hover:underline",
18 },
19 },
20 defaultVariants: {
21 variant: "default",
22 },
23 }
24)
25</script>
26
27<script lang="ts">
28import { cn } from "@/lib/utils"
29import { Sprawlify, type PolymorphicProps } from "@sprawlify/svelte"
30import type { HTMLAttributes } from "svelte/elements";
31
32interface Props extends HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants>, PolymorphicProps<"span"> {}
33
34let { class: className, variant = "default", children, ...rest }: Props = $props()
35</script>
36
37<Sprawlify
38 as="span"
39 data-scope="badge"
40 data-part="root"
41 data-slot="badge"
42 data-variant={variant}
43 class={cn(badgeVariants({ variant, className }))}
44 {...rest}
45>
46 {@render children?.()}
47</Sprawlify>1export { default as Badge, badgeVariants } from "./badge.svelte";2Update the import paths to match your project setup.
Usage
1import { Badge } from "@/components/ui/badge"1<Badge variant="outline">Badge</Badge>Examples
Custom Colors
You can customize the colors of a badge by adding custom classes such as bg-green-50 dark:bg-green-800 to the Badge component.
1<script lang="ts">
2import { Badge } from "@/components/ui/badge"
3</script>
4
Link
Use the asChild prop to render a link as a badge.
1<script lang="ts">
2 import { Badge } from "@/components/ui/badge";
3 import { ArrowUpRightIcon } from "lucide-svelte";
4</script>
Variants
Use the variant prop to change the variant of the badge.
1<script lang="ts">
2import { Badge } from "@/components/ui/badge"
3</script>
4
With Icon
You can render an icon inside the badge. Use data-icon="inline-start" to render the icon on the left and data-icon="inline-end" to render the icon on the right.
1<script lang="ts">
2import { Badge } from "@/components/ui/badge"
3import { BadgeCheck, BookmarkIcon } from "lucide-svelte"
4</script>
Get PRO
Need premium blocks and templates? Upgrade to PRO and get access.