# 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 | undefined`<br> Accessible text description of the badge if child is not text |

## Rendered elements

| Component | Default rendered element |
| --- | --- |
| `Badge` | `span` |

Previous[←Alert Dialog](https://kobalte.dev/docs/core/components/alert-dialog)Next[Breadcrumbs→](https://kobalte.dev/docs/core/components/breadcrumbs)