React Native + Tailwind CSS Badge

A selection of React Native Badge components built with Tailwind CSS

These examples require the Tailwind React Native Classnames package.

Small Badge Component

Small Badge Component
import React from "react";
import { View, Text } from "react-native";
import tailwind from "twrnc";
export const BadgeSm = () => {
return (
<View style={tailwind`flex-1 items-center justify-center gap-4`}>
<View style={tailwind`bg-red-700 px-2 py-1 rounded-md`}>
<Text style={tailwind`text-xs text-red-50 font-bold`}>Badge</Text>
</View>
<View style={tailwind`bg-green-700 px-2 py-1 rounded-md`}>
<Text style={tailwind`text-xs text-green-50 font-bold`}>Badge</Text>
</View>
<View style={tailwind`bg-blue-700 px-2 py-1 rounded-md`}>
<Text style={tailwind`text-xs text-blue-50 font-bold`}>Badge</Text>
</View>
<View style={tailwind`bg-orange-700 px-2 py-1 rounded-md`}>
<Text style={tailwind`text-xs text-orange-50 font-bold`}>Badge</Text>
</View>
<View style={tailwind`bg-teal-700 px-2 py-1 rounded-md`}>
<Text style={tailwind`text-xs text-teal-50 font-bold`}>Badge</Text>
</View>
<View style={tailwind`bg-indigo-700 px-2 py-1 rounded-md`}>
<Text style={tailwind`text-xs text-indigo-50 font-bold`}>Badge</Text>
</View>
<View style={tailwind`bg-fuchsia-700 px-2 py-1 rounded-md`}>
<Text style={tailwind`text-xs text-fuchsia-50 font-bold`}>Badge</Text>
</View>
<View style={tailwind`bg-pink-700 px-2 py-1 rounded-md`}>
<Text style={tailwind`text-xs text-pink-50 font-bold`}>Badge</Text>
</View>
</View>
);
}

Large Badge Component

Large Badge Component
import React from "react";
import { View, Text } from "react-native";
import tailwind from "twrnc";
export const BadgeLg = () => {
return (
<View style={tailwind`flex-1 items-center justify-center gap-4`}>
<View style={tailwind`bg-red-700 px-3 py-1.5 rounded-lg`}>
<Text style={tailwind`text-red-50 font-bold`}>Badge</Text>
</View>
<View style={tailwind`bg-green-700 px-3 py-1.5 rounded-lg`}>
<Text style={tailwind`text-green-50 font-bold`}>Badge</Text>
</View>
<View style={tailwind`bg-blue-700 px-3 py-1.5 rounded-lg`}>
<Text style={tailwind`text-blue-50 font-bold`}>Badge</Text>
</View>
<View style={tailwind`bg-orange-700 px-3 py-1.5 rounded-lg`}>
<Text style={tailwind`text-orange-50 font-bold`}>Badge</Text>
</View>
<View style={tailwind`bg-teal-700 px-3 py-1.5 rounded-lg`}>
<Text style={tailwind`text-teal-50 font-bold`}>Badge</Text>
</View>
<View style={tailwind`bg-indigo-700 px-3 py-1.5 rounded-lg`}>
<Text style={tailwind`text-indigo-50 font-bold`}>Badge</Text>
</View>
<View style={tailwind`bg-fuchsia-700 px-3 py-1.5 rounded-lg`}>
<Text style={tailwind`text-fuchsia-50 font-bold`}>Badge</Text>
</View>
<View style={tailwind`bg-pink-700 px-3 py-1.5 rounded-lg`}>
<Text style={tailwind`text-pink-50 font-bold`}>Badge</Text>
</View>
</View>
);
};

Copyright 2022 - Atom Lab | Privacy Policy | Terms and Conditions