Button

A customizable button component to trigger an action or event.

Galaxy Button

A button with a solid background, used for primary actions. This variant takes 3 props: type, label, onPress.

Preview

import React from "react";

const Button = ({ type = "default", label = "Galaxy Button", onClick }) => {
  const buttonStyles = {
    default: {
      bgColor: "bg-black",
      textColor: "text-white",
      border: "",
    },
    destructive: {
      bgColor: "bg-red-500",
      textColor: "text-white",
      border: "",
    },
    outline: {
      bgColor: "bg-transparent",
      textColor: "text-black",
      border: "border border-black",
    },
    disabled: {
      bgColor: "bg-gray-400",
      textColor: "text-gray-200",
      border: "",
      disabled: true,
    },
  };

  const { bgColor, textColor, border, disabled } = buttonStyles[type] || buttonStyles.default;

  return (
    <button
      className={`py-2 px-4 rounded-md flex items-center justify-center w-[200px] ${bgColor} ${border}`}
      onClick={!disabled ? onClick : null}
      disabled={disabled}
    >
      <span className={`text-base ${textColor}`}>{label}</span>
    </button>
  );
};

export default Button;

Usage Example

import React from "react";
import Button from "./components/comp/Button/GalaxyButton";

const App = () => {
  return (
    <div>
      <Button />
      {/*
      <Button type="destructive" label="Delete" />
      <Button type="outline" label="Outline Button" />
      <Button type="disabled" label="Disabled" />
      */}
    </div>
  );
};

export default App;

Earth Button

A button with an icon, used for secondary actions. This variant takes 5 props: type, label, icon, iconColor, onPress.

Preview

import React from "react";
import { PiAlienThin } from "react-icons/pi";

const Button = ({ 
  label = "Earth Button", 
  type = "default", 
  icon: Icon = PiAlienThin, 
  iconColor, 
  onClick 
}) => {
  const buttonStyles = {
    default: {
      bgColor: "bg-black",
      textColor: "text-white",
      border: "border border-black",
      iconColor: "white",
    },
    destructive: {
      bgColor: "bg-red-500",
      textColor: "text-white",
      border: "border border-red-700",
      iconColor: "white",
    },
    outline: {
      bgColor: "bg-transparent",
      textColor: "text-black",
      border: "border border-black",
      iconColor: "black",
    },
    disabled: {
      bgColor: "bg-gray-400",
      textColor: "text-gray-200",
      border: "border border-gray-500",
      iconColor: "gray",
      disabled: true,
    }
  };

  const { bgColor, textColor, border, disabled } =
    buttonStyles[type] || buttonStyles.default;

  return (
    <button
      className={`py-2 px-4 rounded-md flex items-center justify-center w-[200px] ${bgColor} ${border}`}
      onClick={!disabled ? onClick : null}
      disabled={disabled}
    >
      <span className={`text-base ${textColor} mr-1`}>{label}</span>
      {Icon && <Icon className={`text-xl ${iconColor || buttonStyles[type].iconColor}`} />} 
    </button>
  );
};

export default Button;

Usage Example

import React from "react";
import Button from "./components/comp/Button/EarthButton";

const App = () => {
  return (
    <div>
      <Button />
      {/*
      <Button type="destructive" label="Delete" icon="trash-can-outline" />
      <Button type="outline" label="Outline Button" icon="pencil-outline" />
      <Button type="disabled" label="Disabled" />
      <Button label="Custom Icon" icon="rocket-launch-outline" iconColor="blue" />
      */}
    </div>
  );
};

export default App;