Badge

A small label used for status, counts, or categories.

Preview

<script>
  import { Badge } from '@vultra/ui';
</script>

<div class="flex flex-wrap gap-2">
  <Badge>Default</Badge>
  <Badge variant="secondary">Secondary</Badge>
  <Badge variant="destructive">Destructive</Badge>
  <Badge variant="outline">Outline</Badge>
  <Badge variant="ghost">Ghost</Badge>
  <Badge variant="link">Link</Badge>
</div>

As a link

<Badge href="/docs">Clickable badge</Badge>

Props

Prop	Type	Default
variant	'default' \| 'secondary' \| 'destructive' \| 'outline' \| 'ghost' \| 'link'	'default'
href	string	undefined
class	string	—

Renders a <span> by default, or an <a> when href is set.

Install

npx @vultra/cli add badge