Badge Secondary Destructive Outline
Verified 8 99 20+
<script lang="ts">
import { Badge } from "$lib/components/ui/badge/index.js";
import SealCheckIcon from "phosphor-svelte/lib/SealCheckIcon";
</script>
<div class="flex flex-col items-center gap-2">
<div class="flex w-full flex-wrap gap-2">
<Badge>Badge</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="destructive">Destructive</Badge>
<Badge variant="outline">Outline</Badge>
</div>
<div class="flex w-full flex-wrap gap-2">
<Badge variant="secondary" class="bg-blue-500 text-white dark:bg-blue-600">
<SealCheckIcon />
Verified
</Badge>
<Badge class="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums">8</Badge
>
<Badge
class="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums"
variant="destructive"
>
99
</Badge>
<Badge
class="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums"
variant="outline"
>
20+
</Badge>
</div>
</div>Installation
pnpm dlx jsrepo@latest add badgenpx jsrepo@latest add badgeyarn dlx jsrepo@latest add badgebunx jsrepo@latest add badgeCopy and paste the following code into your project.
<script lang="ts" module>
import { type VariantProps, tv } from 'tailwind-variants';
export const badgeVariants = tv({
base: 'h-5 gap-1 rounded-control border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap [&>svg]:pointer-events-none',
variants: {
variant: {
default: 'bg-primary/15 border-primary/45 text-foreground [a]:hover:bg-primary/25',
secondary: 'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',
destructive:
'bg-destructive/10 border-destructive/30 text-destructive [a]:hover:bg-destructive/20 dark:bg-destructive/20 dark:border-destructive/40',
outline: 'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',
ghost: 'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',
link: 'border-transparent bg-transparent px-0 text-link underline-offset-4 hover:text-foreground hover:underline'
}
},
defaultVariants: {
variant: 'default'
}
});
export type BadgeVariant = VariantProps<typeof badgeVariants>['variant'];
</script>
<script lang="ts">
import type { HTMLAnchorAttributes } from 'svelte/elements';
import { cn, type WithElementRef } from '$lib/utils.js';
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>
Usage
<script lang="ts">
import { Badge } from '$lib/components/ui/badge/index.js';
</script><Badge variant="outline">Badge</Badge>Link
You can use the badgeVariants helper to create a link that looks like a badge.
<script lang="ts">
import { badgeVariants } from '$lib/components/ui/badge/index.js';
</script>
<a href="/docs" class={badgeVariants({ variant: 'outline' })}>Badge</a>