# BadgeNotification

`BadgeNotification` renders a notification badge with a numeric count, typically used for unread message indicators in channel lists. It supports multiple color types (`primary`, `error`, `neutral`) and includes a border ring for visual distinction against various backgrounds.

## Usage

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

<BadgeNotification count={3} size="sm" type="primary" />;
```

```tsx
<BadgeNotification count={99} size="xs" type="error" />
```

## Props

| Prop               | Description                                                                                                                                                                                         | Type                                    |
| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- |
| `count` (required) | The notification count to display.                                                                                                                                                                  | `number`                                |
| `size` (required)  | The size of the notification badge. Size mapping: `'sm'` (20x20), `'xs'` (16x16).                                                                                                                   | `'sm'` \| `'xs'`                        |
| `type`             | The visual variant of the badge, which controls the background color. `'primary'` uses `badgeBgPrimary`, `'error'` uses `badgeBgError`, `'neutral'` uses `badgeBgNeutral`. Defaults to `'primary'`. | `'primary'` \| `'error'` \| `'neutral'` |
| `testID`           | Test identifier for testing frameworks.                                                                                                                                                             | `string`                                |


---

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

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