Kobalte.v0.13.9

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

5 messages
tsx
import { Badge } from "@kobalte/core/badge";
import "./style.css";
function App() {
return (
<Badge class="badge" textValue="5 unread messages">
5 messages
</Badge>
);
}
tsx
import { Badge } from "@kobalte/core/badge";
import "./style.css";
function App() {
return (
<Badge class="badge" textValue="5 unread messages">
5 messages
</Badge>
);
}

API Reference

Badge

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

PropDescription
textValuestring | undefined
Accessible text description of the badge if child is not text

Rendered elements

ComponentDefault rendered element
Badgespan