A selection of React Native Badge components built with Tailwind CSS
These examples require the Tailwind React Native Classnames package.
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>);}
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