Badge

Usage

Use the default slot to set the text of the Badge.

Badge

<UBadge>Badge</UBadge>

You can also use the label prop:

label

Badge

<UBadge label="Badge" />

Style

Use the color and variant props to change the visual style of the Badge.

color

variant

Badge

<UBadge color="primary" variant="solid" />

Size

Use the size prop to change the size of the Badge.

size

Badge

<UBadge size="sm" />

Props

Prop	Default	Description
`size`	`appConfig.ui.badge.default.size`	`string`
`color`	`appConfig.ui.badge.default.color`	`string`
`variant`	`appConfig.ui.badge.default.variant`	`string`
`label`	`null`	`string`
`ui`	`appConfig.ui.badge`	`any`

Preset

{
  "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"
  },
  "variant": {
    "solid": "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-10 dark:ring-opacity-20"
  },
  "default": {
    "size": "sm",
    "variant": "solid",
    "color": "primary"
  }
}