Badge

Small numerical value or status descriptor for UI elements.

When to use

Badge normally appears in proximity to notifications or user avatars with eye-catching appeal, typically displaying unread messages count.

Simplest Usage. Badge will be hidden when count is 0, but we can use showZero to show it.

${overflowCount}+ is displayed when count is larger than overflowCount. The default value of overflowCount is 99.

The count will be animated as it changes.

Set offset of the badge dot, the format is [left, top], which represents the offset of the status dot from the left and top of the default position.

Standalone badge with status.

Use ribbon badge.

Used in standalone when children is empty.

This will simply display a red badge, without a specific count. If count equals 0, it won't display the dot.

The badge can be wrapped with a tag to make it linkable.

Set size of numeral Badge.

We preset a series of colorful Badge styles for use in different situations. You can also set it to a hex color string for custom color.

You can customize the semantic dom style of Badge by passing objects/functions through classNames and styles.

Badge and Badge.Ribbon are exported from @ceebee/ui/client.

Property	Description	Type	Default	Version
`color`	Customize Badge dot color	`string`	`-`	—
`count`	Number to show in badge	`ReactNode`	`-`	—
`classNames`	Customize class for each semantic structure inside the component. Supports object or function.	`Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>`	`-`	—
`dot`	Whether to display a red dot instead of count	`boolean`	`false`	—
`offset`	Set offset of the badge dot	`\[number, number]`	`-`	—
`overflowCount`	Max count to show	`number`	`99`	—
`showZero`	Whether to show badge when count is zero	`boolean`	`false`	—
`size`	If count is set, size sets the size of badge	`medium \| small`	`-`	-
`status`	Set Badge as a status dot	`success \| processing \| default \| error \| warning`	`-`	—
`styles`	Customize inline style for each semantic structure inside the component. Supports object or function.	`Record<SemanticDOM, CSSProperties> \| (info: { props })=> Record<SemanticDOM, CSSProperties>`	`-`	—
`text`	If status is set, text sets the display text of the status dot	`ReactNode`	`-`	—
`title`	Text to show when hovering over the badge. Set to null or false to remove the native tooltip	`string \| null \| false`	`-`	6.5.0

Property	Description	Type	Default	Version
`classNames`	Customize class for each semantic structure inside the component. Supports object or function.	`Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>`	`-`	—
`color`	Customize Ribbon color	`string`	`-`	—
`placement`	The placement of the Ribbon, start and end follow text direction (RTL or LTR)	`start \| end`	`end`	—
`styles`	Customize inline style for each semantic structure inside the component. Supports object or function.	`Record<SemanticDOM, CSSProperties> \| (info: { props })=> Record<SemanticDOM, CSSProperties>`	`-`	—
`text`	Content inside the Ribbon	`ReactNode`	`-`	—