Badge

A Badge component is used to display small pieces of information or status indicators.

Import

ts
import { Badge } from "@kobalte/core/badge";
// or
import { Root } from "@kobalte/core/badge";

ts
import { Badge } from "@kobalte/core/badge";
// or
import { Root } from "@kobalte/core/badge";

The badge consists of:

Badge: The root container for the badge that supports accessibility and content customization.

tsx
<Badge textValue="3 online users">3</Badge>

tsx
<Badge textValue="3 online users">3</Badge>

5 messages

Badge is equivalent to the Root import from @kobalte/core/badge.

Prop	Description
textValue	`string \| undefined` The textValue prop is essential for accessibility. It auto-populates the aria-label attribute, allowing screen readers to interpret the badge’s content.

Data attribute	Description
data-label	Present when textValue is passed or aria-label is passed as a prop.

Component	Default rendered element
`Badge`	`span`