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" />;This is beta documentation for Stream Chat React Native SDK v9. For the latest stable version, see the latest version (v8)
.
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
count (required)
The notification count to display.
| Type |
|---|
| number |
size (required)
The size of the notification badge.
| Type | Values |
|---|---|
| string | 'sm' | 'xs' |
Size mapping:
| Size | Dimensions (min-width × height) |
|---|---|
sm | 20 × 20 |
xs | 16 × 16 |
type
The visual variant of the badge, which controls the background color.
| Type | Default | Values |
|---|---|---|
| string | 'primary' | 'primary' | 'error' | 'neutral' |
Color mapping (from theme semantics):
| Type | Semantic Token |
|---|---|
primary | badgeBgPrimary |
error | badgeBgError |
neutral | badgeBgNeutral |
testID
Test identifier for testing frameworks.
| Type |
|---|
| string |