Badge

Displays a badge or a component that looks like a badge. Implements global theme configuration based on BrConfigProvider, providing flexible style customization capabilities.

Basic Usage

Default

Example

Colors

Use the color prop to control the color theme of the badge.

Default

Primary

Secondary

Success

Warning

Danger

Info

Carbon

Accent

Example

Dot Mode & Numeric Overflow

Used as a superscript attached to other elements, such as message notifications. Supports dot mode and numeric overflow truncation (e.g., 99+).

5

99+

10+

Example

Variants

Provides multiple visual variants to meet different design requirements.

Solid

Secondary

Outline

Soft

Example

Sizes

Provides multiple sizes to suit different layout needs.

Extra Small

Small

Default

Medium

Large

Extra Large

2X Large

Example

With Icon

You can use the icon slot to add a custom icon to the left of the badge content.

Featured

Completed

Warning

Example

Theming

BrBadge fully integrates with BrConfigProvider, allowing you to customize styles via global configuration or local class names.

Global Configuration (BrConfigProvider)

You can globally override badge design tokens such as background color, text color, and border radius via BrConfigProvider, supporting seamless switching between light and dark modes.

Global Theme Customization

Themed Badge

Outline Badge

Example

Local Customization (TailwindCSS)

If you only need to adjust the style of individual badges, you can pass TailwindCSS class names directly via the class prop, which will automatically override the default styles from BrConfigProvider.

Teal Badge

Square Pink

Example

API

Props

Name	Type	Default	Description
variant	'solid' | 'secondary' | 'outline' | 'soft'	'solid'	Badge style variant
color	'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'carbon' | 'accent'	'default'	Badge color theme
size	'default' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'icon'	'default'	Badge size
dot	boolean	false	Whether to enable dot mode
value	number | string	-	Value to display, default slot is not needed when this is provided
max	number	99	Maximum value for numeric overflow, displays max+ when exceeded
disabled	boolean	false	Whether the badge is disabled
standalone	boolean	false	Whether to force standalone positioning, use with relative parent container
as	string	'div'	The HTML tag to render as
class	any	-	Custom CSS class names

Slots

Name	Description
default	Custom badge content. If dot mode is used and it wraps other elements, this slot is for the wrapped target element.
icon	Custom badge icon, displayed to the left of the content.