Elements
Badge
Display a short text to represent a status or a category.
Usage
Use the default slot to set the text of the Badge.
Badge
<UBadge>Badge</UBadge>
You can also use the label
prop:
Badge
<UBadge label="Badge" />
Style
Use the color
and variant
props to change the visual style of the Badge.
variant
can besolid
(default),outline
,soft
orsubtle
.
Badge
<UBadge color="primary" variant="solid">Badge</UBadge>
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
<UBadge color="white" variant="solid">Badge</UBadge>
Gray
Badge
<UBadge color="gray" variant="solid">Badge</UBadge>
Black
Badge
<UBadge color="black" variant="solid">Badge</UBadge>
Size
Use the size
prop to change the size of the Badge.
Badge
<UBadge size="sm">Badge</UBadge>
Rounded
To customize the border radius of the Badge, you can use the ui
prop.
Badge
<UBadge :ui="{ rounded: 'rounded-full' }">Badge</UBadge>
You can customize the whole preset by using the
ui
prop.Props
size
BadgeSize
config.default.size
string
number
symbol
ui
any
undefined
color
BadgeColor
config.default.color
string
number
symbol
variant
any
config.default.variant
label
string | number
null
Config
{
"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"
},
"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"
},
"default": {
"size": "sm",
"variant": "solid",
"color": "primary"
}
}