Badge

Stable v1.0.2

A small label for showing counts, statuses, or just a plain dot. Comes in every severity color you would need, plus a couple of extra styles for when the basics aren't enough.

Interactive Playground

Experiment with badge states. Use absolute positioning to seamlessly overlay badges onto parent components.

State & Style

Content Value

Render as Dot

Active Ping Anim

Appearance

Severity

Danger

Variant

Solid

Geometry

Size

Medium (md)

Pill Rounded

Overlay Logic

Position Logic

Top Right

Live Source Code

<!-- Overlay logic requires a relative parent container -->
<div class="relative inline-flex items-center justify-center p-4 bg-surface rounded-xl">
  <Icon icon="lucide:bell" class="w-8 h-8 text-muted" />
  <Badge value="8" severity="danger" size="md" ping position="top-right" />
</div>

Composites & Icons

Use the #default and #icon slots to inject custom layouts, formatting, or SVG icons right into the badge structure.

Validated Pending Review v5.3.0

<!-- By utilizing slots, you bypass the standard 'value' prop -->
<Badge severity="primary" size="md">
  <template #icon>
    <Icon icon="lucide:check-circle" class="w-3 h-3" />
  </template>
  Validated
</Badge>

<Badge severity="warning" variant="soft" size="lg" :rounded="false">
  <template #icon>
    <Icon icon="lucide:alert-triangle" class="w-4 h-4" />
  </template>
  Pending Review
</Badge>

Overlay Integrations

Apply the position prop. Ensure the parent container has position: relative so the badge attaches exactly to the corners.

99+

<!-- 1. Positioned on an Avatar Image -->
<div class="relative">
  <img src="/avatar.jpg" alt="Example user avatar" class="w-12 h-12 rounded-full" />
  <Badge dot severity="success" position="bottom-right" ping />
</div>

<!-- 2. Positioned on a Button -->
<div class="relative">
  <Button icon="lucide:shopping-cart" label="Checkout" />
  <Badge value="3" severity="danger" position="top-right" />
</div>

<!-- 3. Positioned on a generic Card or Icon Wrapper -->
<div class="relative p-3 bg-content border rounded-xl">
  <Icon icon="lucide:inbox" class="w-6 h-6" />
  <Badge value="99+" severity="primary" position="top-right" size="xs" ping />
</div>

API Reference

Complete specifications for properties and slots.

Props

Name	Type	Default	Description
value	string \| number	undefined	The text or number rendered inside the badge. Overridden by the default slot.
severity	string	"primary"	Color intent. Options: primary, secondary, success, warning, danger, info, contrast.
variant	string	"solid"	Visual style. Options: solid, soft, outline.
size	string	"sm"	Size of the badge. Options: xs, sm, md, lg, xl.
rounded	boolean	true	If true, renders as a pill. If false, renders as a rounded rectangle.
dot	boolean	false	Removes content and collapses the badge into a purely visual notification dot.
ping	boolean	false	Injects a radiating CSS animation element underneath the badge. Excellent for live indicators.
position	string	undefined	Applies absolute positioning logic (top-right, top-left, bottom-right, bottom-left). Parent must be relative.

Slots

Slot Name	Exposed Bindings	Description
default	-	The primary content of the badge. Safely replaces the `value` prop.
icon	-	A dedicated slot to inject an icon beside the text content.