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

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

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>
  );
};