Introducing AlienX extension – The next evolution of UI development.Check it out on VS Code

Enjoy AlienUI? Give it a star on Github ⭐

Badge

A customizable badge component with multiple variants for status indication

Galaxy Badge

An alien badge for galactic verification. This variant takes five props: text, backgroundColor, textColor, width, padding.

Preview

Badge

import React from "react";
import { View, Text } from "react-native";

const Badge = ({ text = "Badge", bgColor = "bg-black", textColor = "text-white", width = "w-20", padding = "px-2 py-1" }) => {
  return (
    <View
      className={`rounded-full flex items-center justify-center ${bgColor}  ${width} ${padding}`}
    >
      <Text className={`text-xs ${textColor}`}>{text}</Text>
    </View>
  );
};

export default Badge;

Usage Example

import React from "react";
import { View } from "react-native";
import Badge from "./components/Badge/GalaxyBadge";

const App = () => {
  return (
    <View>
      <Badge />
      {/*
      <Badge text="New" bgColor="bg-green-500" />
      <Badge text="Sale" bgColor="bg-red-500" border="border border-red-700" />
      <Badge text="Info" bgColor="bg-blue-500" width="w-24" />
      */}
    </View>
  );
};

export default App;