Components
Badge
A short text to represent a status or a category.
Usage
Label
Use the default slot to set the label of the Badge.
Badge
<template>
<UBadge>Badge</UBadge>
</template>
You can achieve the same result by using the label prop.
Badge
<template>
<UBadge :label="Badge" />
</template>
Color
Use the color prop to change the color of the Badge.
Badge
<template>
<UBadge color="neutral">Badge</UBadge>
</template>
Variant
Use the variant props to change the variant of the Badge.
Badge
<template>
<UBadge color="neutral" variant="outline">Badge</UBadge>
</template>
Size
Use the size prop to change the size of the Badge.
Badge
<template>
<UBadge size="lg">Badge</UBadge>
</template>
Examples
class prop
Use the class prop to override the base styles of the Badge.
Badge
<template>
<UBadge class="font-bold rounded-full">Badge</UBadge>
</template>
API
Props
| Prop | Default | Type |
|---|---|---|
as |
|
The element or component this component should render as. |
label |
| |
color |
|
|
variant |
|
|
size |
|
|
Slots
| Slot | Type |
|---|---|
default |
|
Theme
app.config.ts
export default defineAppConfig({
ui: {
badge: {
base: 'rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center',
variants: {
color: {
primary: '',
secondary: '',
success: '',
info: '',
warning: '',
error: '',
neutral: ''
},
variant: {
solid: '',
outline: '',
soft: '',
subtle: ''
},
size: {
sm: 'text-xs px-1.5 py-0.5',
md: 'text-xs px-2 py-1',
lg: 'text-sm px-2 py-1'
}
},
compoundVariants: [
{
color: 'primary',
variant: 'solid',
class: 'bg-[var(--ui-primary)] text-[var(--ui-bg)]'
},
{
color: 'primary',
variant: 'outline',
class: 'text-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]/50'
},
{
color: 'primary',
variant: 'soft',
class: 'bg-[var(--ui-primary)]/10 text-[var(--ui-primary)]'
},
{
color: 'primary',
variant: 'subtle',
class: 'bg-[var(--ui-primary)]/10 text-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]/25'
},
{
color: 'neutral',
variant: 'solid',
class: 'text-[var(--ui-bg)] bg-[var(--ui-bg-inverted)]'
},
{
color: 'neutral',
variant: 'outline',
class: 'ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)]'
},
{
color: 'neutral',
variant: 'soft',
class: 'text-[var(--ui-text)] bg-[var(--ui-bg-elevated)]'
},
{
color: 'neutral',
variant: 'subtle',
class: 'ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg-elevated)]'
}
],
defaultVariants: {
color: 'primary',
variant: 'solid',
size: 'md'
}
}
}
})