Usage
The Badge component is used to highlight information such as status, categories, or counts.
<template>
<UBadge label="New" />
</template>
Props
The element or component this component should render as.
The text or number to display in the badge.
color
string
default:"'primary'"
The color variant of the badge (e.g., ‘primary’, ‘secondary’, ‘success’, ‘warning’, ‘error’, ‘neutral’).
The style variant of the badge (e.g., ‘solid’, ‘outline’, ‘soft’).
size
'xs' | 'sm' | 'md' | 'lg'
default:"'md'"
The size of the badge.
Render the badge with equal padding on all sides. Automatically enabled when there’s no label or default slot content.
Icon name to display before the label. Supports any Iconify icon.
Icon name to display after the label. Supports any Iconify icon.
Avatar configuration to display before the label instead of an icon.
Additional CSS classes to apply.
UI customization object for styling badge slots.
Slots
Custom content to display before the label.
Custom content to display instead of the label.
Custom content to display after the label.
Examples
Basic Badge
<template>
<UBadge label="Badge" />
</template>
Colors
<template>
<div class="flex gap-2">
<UBadge color="primary" label="Primary" />
<UBadge color="secondary" label="Secondary" />
<UBadge color="success" label="Success" />
<UBadge color="warning" label="Warning" />
<UBadge color="error" label="Error" />
<UBadge color="neutral" label="Neutral" />
</div>
</template>
Variants
<template>
<div class="flex gap-2">
<UBadge variant="solid" label="Solid" />
<UBadge variant="outline" label="Outline" />
<UBadge variant="soft" label="Soft" />
</div>
</template>
Sizes
<template>
<div class="flex items-center gap-2">
<UBadge size="xs" label="Extra Small" />
<UBadge size="sm" label="Small" />
<UBadge size="md" label="Medium" />
<UBadge size="lg" label="Large" />
</div>
</template>
With Icons
<template>
<div class="flex gap-2">
<UBadge leadingIcon="i-heroicons-star" label="Featured" />
<UBadge trailingIcon="i-heroicons-x-mark" label="Closeable" />
<UBadge
leadingIcon="i-heroicons-check"
trailingIcon="i-heroicons-arrow-right"
label="Complete"
/>
</div>
</template>
Icon Only (Square)
<template>
<div class="flex gap-2">
<UBadge leadingIcon="i-heroicons-star" square />
<UBadge leadingIcon="i-heroicons-heart" square />
<UBadge leadingIcon="i-heroicons-bell" square />
</div>
</template>
With Avatar
<template>
<UBadge
:avatar="{ src: '/avatar.jpg', alt: 'User' }"
label="John Doe"
/>
</template>
Number Badges
<template>
<div class="flex gap-2">
<UBadge :label="5" color="error" />
<UBadge :label="99" color="primary" />
<UBadge :label="100" color="success" />
</div>
</template>
Custom Content
<template>
<UBadge>
<template #leading>
<span class="animate-pulse">⚡</span>
</template>
<span class="font-bold">Live</span>
<template #trailing>
<span class="text-xs">●</span>
</template>
</UBadge>
</template>
Status Indicators
<template>
<div class="flex gap-2">
<UBadge color="success" label="Active" />
<UBadge color="warning" label="Pending" />
<UBadge color="error" label="Inactive" />
<UBadge color="neutral" label="Draft" />
</div>
</template>
<template>
<UBadge
as="button"
label="Clickable"
trailingIcon="i-heroicons-x-mark"
@click="handleClose"
/>
</template>
Field Group Integration
When used inside a FieldGroup component, the badge automatically inherits size and orientation from the group context.
Notes
- The
square prop is automatically enabled when neither label nor default slot content is provided
- Icons use the Iconify icon system - any icon from Icônes can be used
- The avatar’s size is automatically calculated based on the badge size