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-md 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-[--ui-primary] text-[--ui-bg]'
},
{
color: 'primary',
variant: 'outline',
class: 'text-[--ui-primary] ring ring-inset ring-[--ui-primary]/50'
},
{
color: 'primary',
variant: 'soft',
class: 'bg-[--ui-primary]/10 text-[--ui-primary]'
},
{
color: 'primary',
variant: 'subtle',
class: 'bg-[--ui-primary]/10 text-[--ui-primary] ring ring-inset ring-[--ui-primary]/25'
},
{
color: 'neutral',
variant: 'solid',
class: 'text-[--ui-bg] bg-[--ui-bg-inverted]'
},
{
color: 'neutral',
variant: 'outline',
class: 'ring ring-inset ring-[--ui-border-accented] text-[--ui-text] bg-[--ui-bg]'
},
{
color: 'neutral',
variant: 'soft',
class: 'text-[--ui-text] bg-[--ui-bg-elevated]'
},
{
color: 'neutral',
variant: 'subtle',
class: 'ring ring-inset ring-[--ui-border-accented] text-[--ui-text] bg-[--ui-bg-elevated]'
}
],
defaultVariants: {
color: 'primary',
variant: 'solid',
size: 'md'
}
}
}
})