react-win7-button (7.css - wrapper)

A customizable React Button styled like Windows 7, built with styled-components.

---

---

🚀 Live Demo

👉 Codesandbox

---

📦 Installation

npm install react-win7-button

---

🛠 Usage

import Button from "react-win7-button";

export default function App() {
  return (
    <>
      <Button>Default</Button>
      <Button variant="primary">Primary</Button>
      <Button variant="danger">Danger</Button>
      <Button loading>Loading...</Button>
      <Button toggle>Toggle</Button>
      <Button focused>Focused</Button>
      <Button startIcon={<span>⭐</span>} endIcon={<span>➡️</span>}>
        Icons
      </Button>
      <Button iconOnly startIcon={<span>⚙️</span>} />
    </>
  );
}

---

⚙️ Props

Prop	Type	Default	Description
variant	"default"	"primary"	"danger"
size	"small"	"medium"	"large"
shape	"square"	"rounded"	"pill"
width	string	number	"auto"
height	string	number	"auto"
fullWidth	boolean	false	Button takes full width of parent
color	string	"#222"	Text/icon color
background	string	Win7 gradient	Background color / gradient
startIcon	React.ReactNode	undefined	Icon displayed before children
endIcon	React.ReactNode	undefined	Icon displayed after children
iconOnly	boolean	false	Show only icon, hide text
loading	boolean	false	Show loading spinner and disable button
spinnerPosition	"start"	"end"	"overlay"
active	boolean	undefined	Controlled toggle state
toggle	boolean	false	Enable toggle mode (pressed/unpressed)
focused	boolean	false	Always show focus style
autoFocus	boolean	false	Automatically focus button on mount
onActiveChange	(active: boolean) => void	undefined	Callback when toggle state changes
onClick.	(e: React.MouseEvent<HTMLButtonElement>) => void	undefined	Click event handler

---

🔹 Notes

• Win7 Click Animation: Button visually depresses slightly when clicked via smooth transform + box-shadow transition, no JS timer needed.
• Focus / Focused Prop: Mimics default modal button focus in Windows 7, with pulsing outline and subtle gradient highlight.
• Toggle Button: Controlled via active or uncontrolled internally. Works with onActiveChange callback.
• Loading Spinner: Spinner color inherits color prop. Can appear at start, end, or overlayed on the button.
• Icon-only Buttons: Automatically shrink to minimal width and center the icon.

---

📋 License