Usage

Sizes

Defaults to sm size.

Radius

• none: No border radius.
• sm: Small border radius.
• md: Medium border radius.
• lg: Large border radius.
• full: Fully rounded border radius.

Defaults to sm radius.

Variants (and Colors)

Defaults to solid variant and main color.

Solid

Subtle

Outline

Dot

Start & End Content

With Close Button

If you pass the onClose prop, the close button will be visible. You can override the close icon by passing the endContent prop.

Slots

• base: The base slot of the badge, it is the container of the badge.
• content: The content slot of the badge, it is the container of the badge children.
• dot: Small dot on the left side of the badge. It is visible when the variant=dot prop is passed.
• closeButton: Close button classes of the badge. It is visible when the onClose prop is passed.

Custom Styles

You can customize the Badge component by passing custom Tailwind CSS classes to the component slots.