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";

Features

• Auto-populated ARIA labeling via the textValue prop for enhanced accessibility.
• Built-in ARIA support with role="status" to communicate dynamic updates.

Anatomy

The badge consists of:

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

tsx
<Badge />

tsx
<Badge />

Example

API Reference

Badge

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

Rendered elements