🎨 Add badge UI component

This commit is contained in:
pheralb
2025-08-25 19:04:56 +01:00
parent d78acff5a6
commit 60fca6b2ff
3 changed files with 71 additions and 0 deletions
+35
View File
@@ -0,0 +1,35 @@
<script lang="ts" module>
import type { VariantProps } from "tailwind-variants";
import { badgeVariants } from "@/components/ui/badge";
export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
</script>
<script lang="ts">
import type { HTMLAnchorAttributes } from "svelte/elements";
import type { WithElementRef } from "@/types/components";
import { cn } from "@/utils/cn";
let {
ref = $bindable(null),
href,
class: className,
variant = "default",
children,
...restProps
}: WithElementRef<HTMLAnchorAttributes> & {
variant?: BadgeVariant;
} = $props();
</script>
<svelte:element
this={href ? "a" : "span"}
bind:this={ref}
data-slot="badge"
{href}
class={cn(badgeVariants({ variant }), className)}
{...restProps}
>
{@render children?.()}
</svelte:element>