reactnatively

Badge

Overlay numeric counts, dot indicators, or text labels on any element. Supports absolute positioning over children with configurable corner placement.

Import

typescript

import { Badge } from 'reactnatively';

Interactive preview

SolidOutlineSubtleSuccessWarningErrorNeutral

BadgeDemo.tsx

1import { View, StyleSheet } from 'react-native';2import { Badge } from 'reactnatively';34export function BadgeDemo() {5  return (6    <View style={styles.row}>7      <Badge label="Solid" variant="solid" status="primary" />8      <Badge label="Outline" variant="outline" status="primary" />9      <Badge label="Subtle" variant="subtle" status="primary" />10      <Badge label="Success" status="success" />11      <Badge label="Warning" status="warning" />12      <Badge label="Error" status="error" />13      <Badge label="Neutral" status="neutral" />14    </View>15  );16}1718const styles = StyleSheet.create({19  row: { flexDirection: 'row', flexWrap: 'wrap', gap: 8 },20});

Notification icons

TabBar.tsx

1import { View, StyleSheet, TouchableOpacity } from 'react-native';2import { Ionicons } from '@expo/vector-icons';3import { Badge } from 'reactnatively';45export function TabBar() {6  return (7    <View style={styles.bar}>8      <Badge count={3} status="error">9        <TouchableOpacity>10          <Ionicons name="chatbubble" size={28} color="#fff" />11        </TouchableOpacity>12      </Badge>1314      <Badge count={128} maxCount={99} status="primary">15        <TouchableOpacity>16          <Ionicons name="notifications" size={28} color="#fff" />17        </TouchableOpacity>18      </Badge>1920      <Badge dot status="success">21        <TouchableOpacity>22          <Ionicons name="person" size={28} color="#fff" />23        </TouchableOpacity>24      </Badge>25    </View>26  );27}2829const styles = StyleSheet.create({30  bar: { flexDirection: 'row', justifyContent: 'space-around', padding: 16 },31});

Inline status labels

StatusRow.tsx

1import { View, StyleSheet } from 'react-native';2import { Badge, Text } from 'reactnatively';34export function StatusRow() {5  return (6    <View style={styles.container}>7      <View style={styles.row}>8        <Text variant="sm">Order status:</Text>9        <Badge label="Delivered" status="success" variant="subtle" size="sm" />10      </View>11      <View style={styles.row}>12        <Text variant="sm">Payment:</Text>13        <Badge label="Pending" status="warning" variant="outline" size="sm" />14      </View>15      <View style={styles.row}>16        <Text variant="sm">Account:</Text>17        <Badge label="Suspended" status="error" variant="solid" size="sm" />18      </View>19      <View style={styles.row}>20        <Text variant="sm">Plan:</Text>21        <Badge label="Pro" status="primary" variant="glass" size="md" />22      </View>23    </View>24  );25}2627const styles = StyleSheet.create({28  container: { padding: 20, gap: 12 },29  row: { flexDirection: 'row', alignItems: 'center', gap: 10 },30});

Props

Prop	Type	Default	Description
count	number	undefined	Numeric count displayed inside the badge.
dot	boolean	false	Renders a small dot indicator instead of a label.
label	string	undefined	Text label displayed inside the badge.
status	'primary' \| 'secondary' \| 'success' \| 'warning' \| 'error' \| 'neutral'	"primary"	Semantic color token for the badge.
variant	'solid' \| 'outline' \| 'subtle' \| 'glass'	"solid"	Visual style of the badge.
maxCount	number	99	Cap for the count value. Displays "99+" when exceeded.
size	'sm' \| 'md' \| 'lg'	"md"	Controls padding and font size.
children	ReactNode	undefined	When provided, badge is positioned absolutely over this child.
placement	'topRight' \| 'topLeft' \| 'bottomRight' \| 'bottomLeft'	"topRight"	Corner position when wrapping a child element.
style	StyleProp<ViewStyle>	undefined	Style applied to the badge container.