React
iOS
Android
Flutter
Angular
JavaScript
Unity
Unreal
Node
Python
Ruby
PHP
Java
.NET
Go
RESTimport { BadgeNotification } from "stream-chat-react-native";
<BadgeNotification count={3} size="sm" type="primary" />;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
<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 |