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

Enjoy AlienUI React? 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";

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

export default Badge;

Usage Example

import React from "react";
import Badge from "./components/comp/Badge/GalaxyBadge";

const App = () => {
  return (
    <div>
      <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" />
      */}
    </div>
  );
};

export default App;