# @cypress-design/react-button 中文文档

规范地址：https://npmcn.com/package/%40cypress-design/react-button/

版本：1\.15\.0
npm 元数据更新时间：2026-11-01T20:07:35.890Z
中文译文更新时间：2026-11-11T07:15:11.294Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40cypress-design/react-button
原文对照：https://npmcn.com/package/%40cypress-design/react-button/?lang=original

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：122 kB，18 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- 首次发布：2022-06-06T21:02:02.861Z
- 最新版本发布：2026-11-01T20:07:35.705Z
- 近 30 天下载量：9356（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：52（近 12 个月 3 个）

## 中文简介

按钮组件包含在 `@cypress-design/react-button` 软件包。 你也想安装 `@cypress-design/constants-button` 以获取 TypeScript 的适当类型.

## 安装

```sh
npm install @cypress-design/react-button
```

也可以使用：`pnpm add @cypress-design/react-button`、`yarn add @cypress-design/react-button`、`bun add @cypress-design/react-button`

## README

# 按钮

## 安装

按钮组件包含在 `@cypress-design/react-button` 软件包。 你也想安装 `@cypress-design/constants-button` 以获取 TypeScript 的适当类型.

```bash
npm install @cypress-design/react-button @cypress-design/constants-button
```

或者用纱线

```bash
yarn add @cypress-design/react-button @cypress-design/constants-button
```

## 使用量

```ts
import Button from '@cypress-design/react-button'
```

```jsx
import { IconActionPower } from '@cypress-design/react-icon'
import Button from '@cypress-design/react-button'
export default () => (
  <Button>
    <IconActionPower className="mr-2" />
    Button
  </Button>
)
```

平方按钮

```jsx
import { IconActionPower } from '@cypress-design/react-icon'
import Button from '@cypress-design/react-button'
export default () => (
  <div className="flex items-center gap-4">
    {[20, 24, 32, 40, 48].map((size) => (
      <Button key={size} size={size} square>
        <IconActionPower
          style={{ width: `${size / 2}px`, height: `${size / 2}px` }}
        />
      </Button>
    ))}
  </div>
)
```

## 可能的变体

变体及其可用的大小加样式 `disabled` 设置为 `true` (代为).

```tsx
import {
  default as Button,
  VariantClassesTable,
  SizeClassesTable,
} from '@cypress-design/react-button'

export default () => {
  const darkModeVariants = [
    'outline-dark',
    'outline-red-dark-mode',
    'outline-jade-dark-mode',
    'outline-indigo-dark-mode',
    'outline-purple-dark-mode',
    'red-dark-mode',
    'purple-dark-mode',
    'indigo-dark-mode',
    'disabled-dark-mode',
  ]

  return (
    <div className="flex flex-wrap justify-stretch gap-[8px]">
      {Object.keys(VariantClassesTable).map((variant) => (
        <div
          key={variant}
          className="flex min-w-[180px] flex-col items-center gap-[16px] rounded px-[8px] py-[12px]"
          style={{
            backgroundColor: darkModeVariants.includes(variant)
              ? '#1a202c'
              : 'white',
            color: darkModeVariants.includes(variant) ? 'white' : 'black',
          }}
        >
          {variant}
          {Object.keys(SizeClassesTable).map((size) => (
            <div key={size} className="flex items-center gap-[8px]">
              {size}
              <Button variant={variant} size={size}>
                Button
              </Button>
            </div>
          ))}
          <div key={variant} className="flex items-center gap-[8px]">
            🚫
            <Button variant={variant} size="48" disabled>
              Button
            </Button>
          </div>
        </div>
      ))}
    </div>
  )
}
```

## 常见问题

### @cypress-design/react-button 是什么？

按钮组件包含在 @cypress-design/react-button 软件包。 你也想安装 @cypress-design/constants-button 以获取 TypeScript 的适当类型\.

### 如何安装 @cypress-design/react-button？

在项目目录运行 npm install @cypress-design/react-button，或使用 pnpm add / yarn add / bun add。

### @cypress-design/react-button 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @cypress-design/react-button 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @cypress-design/react-button 可以商用吗？

@cypress-design/react-button 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @cypress-design/react-button 的下载量有多少？

根据 npm 官方下载统计，@cypress-design/react-button 在 2026/10/11 – 2026/11/09 这 30 天内被下载 9,356 次，日均约 312 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @cypress-design/react-button 还在维护吗？

最新版本 1\.15\.0 发布于 2026/11/02（9 天前）；至今共发布 52 个版本，其中过去 12 个月发布了 3 个；首次发布于 2022/06/07。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。