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