Badge
A badge is a small inline label for status, category, or count annotations.
Appearance
Neutral
The default badge. Use for low-emphasis labels where no semantic color is needed.
Neutral
vue
<Badge>Neutral</Badge>Primary
Use a primary badge to draw attention to new or updated information.
Primary
vue
<Badge variant="primary">Primary</Badge>Success
Use a success badge to indicate active, complete, or healthy status.
Active
vue
<Badge variant="success">Active</Badge>Warning
Use a warning badge to indicate a pending, degraded, or attention-required state.
Pending
vue
<Badge variant="warning">Pending</Badge>Danger
Use a danger badge to indicate an error, failure, or critical state.
Error
vue
<Badge variant="danger">Error</Badge>Info
Use an info badge for informational context that doesn't carry a positive or negative connotation.
Info
vue
<Badge variant="info">Info</Badge>All variants
NeutralPrimaryActivePendingErrorInfo
vue
<Badge variant="neutral">Neutral</Badge>
<Badge variant="primary">Primary</Badge>
<Badge variant="success">Active</Badge>
<Badge variant="warning">Pending</Badge>
<Badge variant="danger">Error</Badge>
<Badge variant="info">Info</Badge>Common patterns
Dynamic status badge
Derive the variant from your data at runtime.
onlinedegradedofflineunknown
vue
<script setup>
const statusVariant = (status) => ({
online: 'success',
degraded: 'warning',
offline: 'danger',
})[status] ?? 'neutral'
</script>
<template>
<Badge :variant="statusVariant(item.status)">
{{ item.status }}
</Badge>
</template>With dot indicator
Add dot for a small status dot that matches the variant color — useful alongside text labels.
OnlineDegradedOfflineUnknown
vue
<Badge variant="success" dot>Online</Badge>
<Badge variant="warning" dot>Degraded</Badge>
<Badge variant="danger" dot>Offline</Badge>
<Badge variant="neutral" dot>Unknown</Badge>In a table cell
Pass a scoped slot to DataTable to render a badge per row.
vue
<DataTable :columns="columns" :rows="rows">
<template #cell-status="{ value }">
<Badge :variant="statusVariant(value)">{{ value }}</Badge>
</template>
</DataTable>Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral' | Color scheme |
dot | boolean | false | Show a small status dot before the label |
Slots
| Slot | Description |
|---|---|
default | Badge text or content |