@props({'variant': 'default'})
<span data-slot="badge" {{ attributes.cn(
    "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-md border px-2 py-0.5 text-xs font-medium transition-[color,box-shadow] [&>svg]:pointer-events-none [&>svg]:size-3",
    {
        'default': 'border-transparent bg-primary text-primary-foreground',
        'secondary': 'border-transparent bg-secondary text-secondary-foreground',
        'destructive': 'border-transparent bg-destructive text-white dark:bg-destructive/60',
        'success': 'border-transparent bg-success text-success-foreground',
        'warning': 'border-transparent bg-warning text-warning-foreground',
        'outline': 'text-foreground',
    }[variant],
) }}>{{ slot }}</span>