Badge

Displays a badge or a component that looks like a badge.

Variants

Badge comes in several visual variants.

Default

Secondary

Destructive

Outline

Ghost

<Badge>Default</Badge>
<Badge Variant="BadgeVariant.Secondary">Secondary</Badge>
<Badge Variant="BadgeVariant.Destructive">Destructive</Badge>
<Badge Variant="BadgeVariant.Outline">Outline</Badge>
<Badge Variant="BadgeVariant.Ghost">Ghost</Badge>

Usage Examples

Use badges to annotate statuses or counts.

Status:

Active

Notifications:

Version:

v1.0.0

<div class="flex items-center gap-2">
    <span>Status:</span>
    <Badge>Active</Badge>
</div>
<div class="flex items-center gap-2">
    <span>Notifications:</span>
    <Badge Variant="BadgeVariant.Destructive">5</Badge>
</div>
<div class="flex items-center gap-2">
    <span>Version:</span>
    <Badge Variant="BadgeVariant.Outline">v1.0.0</Badge>
</div>