elements

Badge

GitHub

Display a short text to represent a status or a category.

Usage

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

Badge

{
  "message": "You should use slots with <ContentRenderer>",
  "value": null,
  "excerpt": false,
  "tag": "div"
}

You can also use the label prop:

Badge
{
  "message": "You should use slots with <ContentRenderer>",
  "value": null,
  "excerpt": false,
  "tag": "div"
}

Style

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

  • variant can be solid (default), outline, soft or subtle.

Badge

{
  "message": "You should use slots with <ContentRenderer>",
  "value": null,
  "excerpt": false,
  "tag": "div"
}

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

{
  "message": "You should use slots with <ContentRenderer>",
  "value": null,
  "excerpt": false,
  "tag": "div"
}

Gray

Badge

{
  "message": "You should use slots with <ContentRenderer>",
  "value": null,
  "excerpt": false,
  "tag": "div"
}

Black

Badge

{
  "message": "You should use slots with <ContentRenderer>",
  "value": null,
  "excerpt": false,
  "tag": "div"
}

Size

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

Badge

{
  "message": "You should use slots with <ContentRenderer>",
  "value": null,
  "excerpt": false,
  "tag": "div"
}

Rounded

To customize the border radius of the Badge, you can use the ui prop.

Badge

{
  "message": "You should use slots with <ContentRenderer>",
  "value": null,
  "excerpt": false,
  "tag": "div"
}
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

{  "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"  }}

Avatar

Display an image that represents a resource or a group of resources.

Button

Create a button with icon or link capabilities.