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
"sm" | "xs" | "md" | "lg"
config.default.size
ui
any
undefined
color
any
config.default.color
variant
BadgeVariant
config.default.variant
"solid"
"outline"
"soft"
"subtle"
label
string | number
null
Config
UBadge.vue
{ "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" }}