Badge

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

Import

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.

<Badge />

Example

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

export function BasicExample() {
  return (
    <Badge class={style.badge} textValue="5 unread messages">
      5 messages
    </Badge>
  );
}

.badge {
  display: inline-block;
  padding: 0.2em 0.6em;
  background-color: hsl(201 96% 32%);
  color: white;
  border-radius: 0.5rem;
  font-size: 0.875rem;
}

API Reference

Badge

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

Rendered elements