Preview

Installation

npx sigma-ui@latest add badge

Usage

<script setup lang="ts">
import { Badge } from '@/components/ui/badge';
</script>

<template>
  <Badge variant="secondary">
    Badge
  </Badge>
</template>

Set variant to default, secondary, outline, or destructive. To give another element the badge styles, use badgeVariants:

<script setup lang="ts">
import { badgeVariants } from '@/components/ui/badge';
</script>

<template>
  <a
    href="/changelog"
    :class="badgeVariants({ variant: 'outline' })"
  >
    New
  </a>
</template>

Examples

Default

Secondary

Outline

Destructive

API Reference

Badge

Props

Prop	Type	Default
variant Visual style of the badge.	"default" | "destructive" | "secondary" | "outline" | null	-

Slots

Slot	Scope
default The content of the component.	-

Accessibility

Renders a plain div with no role. It has no keyboard interactions of its own.

Key	Description
None	The badge is not focusable. If you render it as a link or button with badgeVariants, that element keeps its native keyboard behaviour.