@panosen/rc-button

一个现代化的 React 按钮组件，支持自定义颜色和渐变效果。

特性

• 🎨 自定义颜色 - 支持通过 color 属性自定义按钮颜色
• ✨ 现代化设计 - 优雅的渐变和悬停效果
• 🎯 完整的交互状态 - 支持 hover、active、focus、disabled 状态
• 📦 轻量级 - 零依赖（除了 React）
• 🔧 TypeScript 支持 - 完整的类型定义
• 🎭 灵活配置 - 支持图标、自定义样式等

安装

npm install @panosen/rc-button

或使用 pnpm：

pnpm add @panosen/rc-button

或使用 yarn：

yarn add @panosen/rc-button

使用

基础用法

import { Button } from '@panosen/rc-button';
import '@panosen/rc-button/style.css';

function App() {
  return (
    <Button onClick={() => console.log('clicked')}>
      Click Me
    </Button>
  );
}

自定义颜色

<Button color="#FF5733">Red Orange</Button>
<Button color="#33FF57">Lime Green</Button>
<Button color="#3357FF">Royal Blue</Button>

带图标

<Button icon={<YourIcon />}>
  Button with Icon
</Button>

自定义样式

<Button 
  className="my-custom-class"
  style={{ fontSize: '1.2rem' }}
>
  Custom Style
</Button>

API

Button Props

| 属性 | 类型 | 默认值 | 描述 | |------|------|--------|------| | children | React.ReactNode | - | 按钮内容 | | icon | React.ReactNode | - | 按钮图标 | | className | string | - | 自定义类名 | | style | React.CSSProperties | - | 自定义样式 | | color | string | #667eea | 按钮主题颜色（支持 hex 格式） | | onClick | React.MouseEventHandler | - | 点击事件处理函数 |

组件使用 React.forwardRef，支持传递 ref 到按钮元素。

颜色系统

按钮使用 CSS 变量来实现动态颜色系统：

• --button-color: 主题色
• --button-hover-color: 悬停颜色（自动计算为较暗的颜色）
• --button-active-color: 激活颜色（自动计算为更暗的颜色）

当你传入 color 属性时，组件会自动计算 hover 和 active 状态的颜色。

样式特性

• 渐变背景 - 悬停时显示微妙的渐变效果
• 阴影效果 - 悬停和聚焦时的柔和阴影
• 平滑过渡 - 所有状态变化都有流畅的过渡动画
• 无障碍支持 - 完整的键盘导航和焦点管理

开发

# 安装依赖
pnpm install

# 开发模式
pnpm dev

# 构建
pnpm build

# 代码检查
pnpm lint

技术栈

• React 18/19
• TypeScript
• Vite
• SCSS Modules

浏览器支持

支持所有现代浏览器：

• Chrome (最新版本)
• Firefox (最新版本)
• Safari (最新版本)
• Edge (最新版本)

相关链接

• GitHub Repository
• npm Package