按钮 Button

一个基于 React 和 class-variance-authority 构建的高度可配置按钮组件，支持变体、图标、加载状态等功能。

---

📦 引入方式

import { Button } from '@npmqg/react-ui-core';

---

🧩 使用示例

📚 基本使用

示例

源码

<Button>提交</Button>

📚 设置按钮类型（variant）

示例

源码

<Button variant="default">默认按钮</Button>
<Button variant="text">文本按钮</Button>
<Button variant="link">链接按钮</Button>

📚 设置尺寸（size）

示例

源码

<Button size="sm">小按钮</Button>
<Button size="default">默认按钮</Button>
<Button size="lg">大按钮</Button>
<Button size="icon" icon={<IconComponent />} />

📚 图标和加载状态

示例

源码

<Button icon={<CheckIcon />}>保存</Button>
<Button loading>加载中</Button>
<Button loading loadingText="提交中..." />

📚 自定义颜色（textColor）

示例

源码

<Button textColor="primary">主要文字</Button>
<Button textColor="danger">危险文字</Button>
<Button textColor="success">成功文字</Button>
<Button textColor="gray">灰色文字</Button>

📚 与 asChild 搭配使用（继承其他元素）

示例

下载

源码

<Button asChild>
  <a href="/download">下载</a>
</Button>

---

🧩 Props

名称	类型	默认值	描述
variant	"default" | "text" | "link"	"default"	按钮风格类型
size	"sm" | "default" | "lg" | "icon" | "zero"	"default"	按钮尺寸
textColor	"default" | "success" | "primary" | "danger" | "warning" | "info" | "gray"	"default"	控制文字颜色
icon	React.ReactNode	undefined	按钮中的图标
loading	boolean	false	是否为加载中状态
loadingText	string	undefined	加载时展示的文字
asChild	boolean	false	是否作为子组件渲染（用于 Slot 包裹其他组件）
disabled	boolean	false	是否禁用按钮
children	React.ReactNode	-	按钮内容
...props	React.ButtonHTMLAttributes<HTMLButtonElement>	-	原生 <button> 的所有属性支持

---

🎨 样式说明

• 使用 cva 定义了变体类名，支持多种样式组合。
• 图标（如 <Loader2 />）自动适应大小和位置。
• 默认带有响应式 hover 和 focus 样式。
• 支持 Tailwind 样式自定义扩展。