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.
variantcan besolid(default),outline,softorsubtle.
Badge
<UBadge color="primary" variant="solid" />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" />Gray
Badge
<UBadge color="gray" variant="solid" />Black
Badge
<UBadge color="black" variant="solid" />Size
Use the size prop to change the size of the Badge.
Badge
<UBadge size="sm" />Rounded
To customize the border radius of the Badge, you can use the ui prop.
Badge
<UBadge :ui="{ rounded: 'rounded-full' }" />You can customize the whole preset by using the
ui prop.Props
size
"sm" | "xs" | "md" | "lg"
config.default.size
ui
any
undefined
color
any
config.default.color
variant
"solid" | "outline" | "soft" | "subtle"
config.default.variant
label
string | number
null
Preset
appConfig.ui.badge
undefined