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="gray">Badge</UBadge>
</template>
Variant
Use the variant props to change the variant of the Badge.
Badge
<template>
<UBadge color="gray" 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: '',
error: '',
red: '',
orange: '',
amber: '',
yellow: '',
lime: '',
green: '',
emerald: '',
teal: '',
cyan: '',
sky: '',
blue: '',
indigo: '',
violet: '',
purple: '',
fuchsia: '',
pink: '',
rose: '',
gray: ''
},
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-primary-500 dark:bg-primary-400 text-white dark:text-gray-900'
},
{
color: 'primary',
variant: 'outline',
class: 'text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/50 dark:ring-primary-400/50'
},
{
color: 'primary',
variant: 'soft',
class: 'bg-primary-500/10 dark:bg-primary-400/10 text-primary-500 dark:text-primary-400'
},
{
color: 'primary',
variant: 'subtle',
class: 'bg-primary-500/10 dark:bg-primary-400/10 text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/25 dark:ring-primary-400/25'
},
{
color: 'gray',
variant: 'solid',
class: 'text-white dark:text-gray-900 bg-gray-900 dark:bg-white'
},
{
color: 'gray',
variant: 'outline',
class: 'ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-900'
},
{
color: 'gray',
variant: 'soft',
class: 'text-gray-700 dark:text-gray-200 bg-gray-100 dark:bg-gray-800'
},
{
color: 'gray',
variant: 'subtle',
class: 'ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-100 dark:bg-gray-800'
}
],
defaultVariants: {
color: 'primary',
variant: 'solid',
size: 'md'
}
}
}
})