Badge
A Badge
component is used to display small pieces of information or status indicators.
Import
ts
import { Badge } from "@kobalte/core/badge";// orimport { Root } from "@kobalte/core/badge";
ts
import { Badge } from "@kobalte/core/badge";// orimport { 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
.
Prop | Description |
---|---|
textValue | string | undefined Accessible text description of the badge if child is not text |
Rendered elements
Component | Default rendered element |
---|---|
Badge | span |