# 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";
```

## 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 />
```

## Example

:::preview
<BasicExample />

***

```tsx title="badge.tsx" title="index.tsx" tab file="/opt/build/repo/apps/docs/src/examples/badge.tsx#L3-L11"
import { Badge } from "@kobalte/core/badge";

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

```css title="badge.module.css" title="style.css" tab file="/opt/build/repo/apps/docs/src/examples/badge.module.css"
.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`.

| 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`                   |