RDH Button

一个美观、可定制的 React 按钮组件库。

特性

• 🎨 多种样式变体
• 🌈 支持自定义颜色
• 📱 响应式设计
• 🎯 TypeScript 支持
• ⚡ 轻量级
• 🧩 易于集成

安装

npm install rdh-button
# 或
yarn add rdh-button
# 或
pnpm add rdh-button

使用

import { Button } from 'rdh-button';

function App() {
  return (
    <Button variant="primary" onClick={() => console.log('Clicked!')}>
      点击我
    </Button>
  );
}

API

Button Props

| 属性 | 类型 | 默认值 | 描述 | |------|------|--------|------| | variant | 'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'ghost' | 'primary' | 按钮样式变体 | | size | 'small' \| 'medium' \| 'large' | 'medium' | 按钮尺寸 | | disabled | boolean | false | 是否禁用 | | loading | boolean | false | 是否显示加载状态 | | fullWidth | boolean | false | 是否全宽显示 | | icon | ReactNode | undefined | 自定义图标 | | iconPosition | 'left' \| 'right' | 'left' | 图标位置 | | className | string | undefined | 自定义类名 | | style | CSSProperties | undefined | 自定义样式 |

示例

基础用法

<Button>默认按钮</Button>
<Button variant="primary">主要按钮</Button>
<Button variant="secondary">次要按钮</Button>

不同尺寸

<Button size="small">小按钮</Button>
<Button size="medium">中按钮</Button>
<Button size="large">大按钮</Button>

不同状态

<Button disabled>禁用按钮</Button>
<Button loading>加载中...</Button>

带图标

<Button icon={<span>✨</span>}>带图标</Button>
<Button icon={<span>🚀</span>} iconPosition="right">
  图标在右侧
</Button>

License

MIT