92 lines
1.6 KiB
Markdown
92 lines
1.6 KiB
Markdown
# 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) |