# BadgeCount

`BadgeCount` renders a rounded pill-shaped badge displaying a numeric or string count. It is typically used to show overflow counts in avatar stacks and groups, or anywhere a count indicator is needed.

The badge adapts its dimensions based on the `size` prop and uses theme tokens for colors, borders, and typography.

## Usage

```tsx
import { BadgeCount } from "stream-chat-react-native";

<BadgeCount count={5} size="md" />;
```

```tsx
<BadgeCount count="+3" size="sm" />
```

## Props

| Prop               | Description                                                                                                                                      | Type                       |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------- |
| `count` (required) | The value to display inside the badge. Can be a number or a string.                                                                              | `string \| number`         |
| `size` (required)  | The size of the badge. Controls the height, minimum width, font size, and padding. Size mapping: `'lg'` (32x32), `'md'` (24x24), `'sm'` (20x20). | `'sm'` \| `'md'` \| `'lg'` |


---

This page was last updated at 2026-04-17T17:33:46.617Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/ui-components/base-ui/badge-count/](https://getstream.io/chat/docs/sdk/react-native/ui-components/base-ui/badge-count/).