# Core/Badge - Usage

Badges display an indicator/counter on an associated component.

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `variant` | `'counter' \| 'dot'` | No | 'counter' | The variant of the badge. 'counter' displays a count, 'dot' displays only a dot.<br>@default 'counter' |
| `appearance` | `'danger' \| 'info' \| 'success' \| 'warning' \| 'neutral'` | No | 'danger' | Controls the Badge color.<br>@default 'danger' |
| `size` | `(typeof badgeSizes)[number]` | No | 'md' | Controls the Badge dimensions.<br>@default 'md' |
| `count` | `number` | No | 0 | The number to display in the badge. Default is 0. |
| `showZero` | `boolean` | No | false | Whether to display the badge when the count is zero. Default is false. |
| `overflowCount` | `number` | No | 99 | The number to display in the badge when the count is greater than the overflow count. Default is 99. |
| `className` | `never` | No | `--` | Use `FORCE__className` instead. |
| `style` | `never` | No | `--` | Inline styles are not supported; use component props or `FORCE__className`. |
| `FORCE__className` | `string` | No | `--` | 🚨 This prop is meant to be an escape hatch. 🚨<br><br>If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly.<br><br>Add a CSS class to the component. |
| `aria-live` | `React.AriaAttributes['aria-live']` | No | `--` | `--` |