Components
Badge
Badge component for React Native
Installation
npx rn-glow add badge⚙️ Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | required | The text to display inside the badge. |
variant | "default" | "success" | "warning" | "error" | "notifications" | "pending" | "default" | Visual style of the badge (color and intent). |
size | "sm" | "md" | "lg" | "md" | Controls the overall size (padding, font size) of the badge. |
radius | "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | "md" | Adjusts the border radius using predefined scale values. |
style | ViewStyle | undefined | Custom style object for the badge container. |
textStyle | TextStyle | undefined | Custom style object for the label text. |
icon | React.ReactNode | undefined | Optional icon (left of label) to display inside the badge. |
🚀 Example
import { View, Text, ScrollView, SafeAreaView } from "react-native";
import React from "react";
import { Badge } from "@/components";
import { SymbolView } from "expo-symbols";
import {
FontAwesome5,
FontAwesome6,
Fontisto,
Ionicons,
MaterialCommunityIcons,
} from "@expo/vector-icons";
const BadgeDemo: React.FC = (): React.ReactNode => {
return (
<ScrollView
className="flex-1 bg-gray-950"
contentContainerStyle={{
flexGrow: 1,
paddingVertical: 24,
}}
scrollEnabled={true}
showsHorizontalScrollIndicator={false}
showsVerticalScrollIndicator={false}
contentInsetAdjustmentBehavior="always"
>
<SafeAreaView className="flex-1">
<View className="px-6 mb-12 mt-5">
<Text className="text-white text-2xl font-semibold text-center mb-2">
Badge Components
</Text>
<Text className="text-gray-400 text-center text-sm">
Status indicators and labels
</Text>
</View>
<View className="px-6 mb-10">
<Text className="text-white text-lg font-medium mb-6">
Status Indicators
</Text>
<View className="flex-row flex-wrap gap-4">
<Badge
label="Online"
radius="full"
size="md"
variant="notifications"
icon={
<SymbolView
name="circle.fill"
size={12}
tintColor={"lightgreen"}
/>
}
/>
<Badge
label="Away"
radius="full"
size="md"
variant="notifications"
icon={
<SymbolView name="moon.fill" size={12} tintColor={"#FFFF00"} />
}
/>
<Badge
label="Busy"
radius="full"
size="md"
variant="notifications"
icon={
<SymbolView
name="minus.circle.fill"
size={12}
tintColor={"#DF0000"}
/>
}
/>
<Badge
label="Offline"
radius="full"
size="md"
variant="notifications"
icon={
<SymbolView name="circle.fill" size={12} tintColor={"gray"} />
}
/>
</View>
</View>
</SafeAreaView>
</ScrollView>
);
};
export default BadgeDemo;