react-superhero-buttons

Themed React button components shaped and sized after your favorite superheroes. Batman is up first — more heroes to come.

Install

npm install react-superhero-buttons

Usage

import { BatmanButton, SuperheroButton } from "react-superhero-buttons";

function App() {
  return (
    <>
      <BatmanButton size="lg" shape="hex" onClick={() => console.log("I'm Batman")}>
        I'm Batman
      </BatmanButton>

      {/* Generic form, useful once more heroes are added */}
      <SuperheroButton hero="batman" size="md" shape="pill">
        To the Batmobile
      </SuperheroButton>
    </>
  );
}

Props

| Prop | Type | Default | Notes | | -------- | ---------------------------------------------- | ---------- | --------------------------------------- | | hero | "batman" | — | Only on SuperheroButton; picks the theme | | shape | "rounded" \| "pill" \| "square" \| "hex" | "rounded"| Button outline shape | | size | "sm" \| "md" \| "lg" \| "xl" | "md" | Padding + font scale |

All standard <button> props (onClick, disabled, className, etc.) are passed through.

Roadmap

• [x] Batman
• [ ] Superman
• [ ] Wonder Woman
• [ ] More on request

License

MIT