Badge
Usage
Use the default slot to set the text of the Badge.
Badge
<template>
<UBadge>Badge</UBadge>
</template>
You can also use the label prop:
<template>
<UBadge label="Badge" />
</template>
Style
Use the color and variant props to change the visual style of the Badge.
variantcan besolid(default),outline,softorsubtle.
Badge
<template>
<UBadge color="primary" variant="solid">Badge</UBadge>
</template>
Besides all the colors from the ui.colors object, you can also use the white and black colors with their pre-defined variants.
White
Badge
<template>
<UBadge color="white" variant="solid">Badge</UBadge>
</template>
Gray
Badge
<template>
<UBadge color="gray" variant="solid">Badge</UBadge>
</template>
Black
Badge
<template>
<UBadge color="black" variant="solid">Badge</UBadge>
</template>
Size
Use the size prop to change the size of the Badge.
Badge
<template>
<UBadge size="sm">Badge</UBadge>
</template>
Rounded
To customize the border radius of the Badge, you can use the ui prop.
Badge
<template>
<UBadge :ui="{ rounded: 'rounded-full' }">Badge</UBadge>
</template>
ui prop.Icon
Use any icon from Iconify by setting the icon prop by using this pattern: i-{collection_name}-{icon_name}.
Use the leading and trailing props to set the icon position or the leading-icon and trailing-icon props to set a different icon for each position.
<template>
<UBadge
icon="i-heroicons-rocket-launch"
size="sm"
color="primary"
variant="solid"
label="Badge"
:trailing="false"
/>
</template>
Slots
leading
Use the #leading slot to set the content of the leading icon.
Badge<template>
<UBadge label="Badge" color="gray">
<template #leading>
<UAvatar
src="https://avatars.githubusercontent.com/u/739984?v=4"
size="3xs"
/>
</template>
</UBadge>
</template>
trailing
Use the #trailing slot to set the content of the trailing icon.
<template>
<UBadge label="Badge" color="gray">
<template #trailing>
<UIcon name="i-heroicons-rocket-launch" class="w-4 h-4" />
</template>
</UBadge>
</template>
Props
config.default.size"sm""xs""md""lg"{}nullconfig.default.colorconfig.default.variant"solid""outline""soft""subtle"nullnullnullfalsefalseConfig
{
base: 'inline-flex items-center',
rounded: 'rounded-md',
font: 'font-medium',
size: {
xs: 'text-xs px-1.5 py-0.5',
sm: 'text-xs px-2 py-1',
md: 'text-sm px-2 py-1',
lg: 'text-sm px-2.5 py-1.5'
},
gap: {
xs: 'gap-0.5',
sm: 'gap-1',
md: 'gap-1',
lg: 'gap-1.5'
},
color: {
white: {
solid: 'ring-1 ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white dark:bg-gray-900'
},
gray: {
solid: 'ring-1 ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-800'
},
black: {
solid: 'text-white dark:text-gray-900 bg-gray-900 dark:bg-white'
}
},
variant: {
solid: 'bg-{color}-500 dark:bg-{color}-400 text-white dark:text-gray-900',
outline: 'text-{color}-500 dark:text-{color}-400 ring-1 ring-inset ring-{color}-500 dark:ring-{color}-400',
soft: 'bg-{color}-50 dark:bg-{color}-400 dark:bg-opacity-10 text-{color}-500 dark:text-{color}-400',
subtle: 'bg-{color}-50 dark:bg-{color}-400 dark:bg-opacity-10 text-{color}-500 dark:text-{color}-400 ring-1 ring-inset ring-{color}-500 dark:ring-{color}-400 ring-opacity-25 dark:ring-opacity-25'
},
icon: {
base: 'flex-shrink-0',
size: {
xs: 'h-4 w-4',
sm: 'h-4 w-4',
md: 'h-5 w-5',
lg: 'h-5 w-5'
}
},
default: {
size: 'sm',
variant: 'solid',
color: 'primary'
}
}