PettyUI/.firecrawl/kobalte.dev-docs-core-components-badge.md

Badge

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

Import

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

Copyts
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.

Copytsx
<Badge />

Copytsx
<Badge />

Example

5 messages

index.tsxstyle.css

Copytsx
import { Badge } from "@kobalte/core/badge";
import "./style.css";

function App() {
  return (
    <Badge class="badge" textValue="5 unread messages">
      5 messages
    </Badge>
  );
}

Copytsx
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

Rendered elements

Component	Default rendered element
Badge	span

Previous←Alert DialogNextBreadcrumbs→