https://github.com/delpikye-v/react-win7-button
A Windows 7 styled React button component with spinner and variants.
https://github.com/delpikye-v/react-win7-button
7css button-window7 css win7-css
Last synced: 4 months ago
JSON representation
A Windows 7 styled React button component with spinner and variants.
- Host: GitHub
- URL: https://github.com/delpikye-v/react-win7-button
- Owner: delpikye-v
- License: mit
- Created: 2025-09-23T15:31:32.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-09-26T19:56:07.000Z (8 months ago)
- Last Synced: 2025-11-22T09:21:17.010Z (6 months ago)
- Topics: 7css, button-window7, css, win7-css
- Homepage: https://www.npmjs.com/package/react-win7-button
- Size: 17.6 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-win7-button (7.css - wrapper)
A customizable React Button styled like Windows 7, built with **styled-components**.
---
[](https://www.npmjs.com/package/react-win7-button)
[](https://standardjs.com)
---
### 🚀 Live Demo
👉 [Codesandbox](https://codesandbox.io/p/sandbox/83t4jk)
---
### 📦 Installation
```bash
npm install react-win7-button
```
---
### 🛠 Usage
```tsx
import Button from "react-win7-button";
export default function App() {
return (
<>
Default
Primary
Danger
Loading...
Toggle
Focused
⭐} endIcon={➡️}>
Icons
⚙️} />
>
);
}
```
---
### ⚙️ Props
| Prop | Type | Default | Description |
| ----------------- | -------------------------------------------------- | ------------- | --------------------------------------- |
| `variant` | `"default"` | `"primary"` | `"danger"` | `"default"` | Button style variant |
| `size` | `"small"` | `"medium"` | `"large"` | `"medium"` | Button size |
| `shape` | `"square"` | `"rounded"` | `"pill"` | `"rounded"` | Button shape |
| `width` | `string` | `number` | `"auto"` | Button width |
| `height` | `string` | `number` | `"auto"` | Button height |
| `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"` | `"start"` | Position of spinner when `loading=true` |
| `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) => 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