# @asphalt-react/button 中文文档

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

版本：2\.19\.0
npm 元数据更新时间：2026-10-29T07:11:12.681Z
中文译文更新时间：2026-11-08T00:04:26.573Z
软件包许可：UNLICENSED

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

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

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

- 包体积（解压后）：38.9 kB，6 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：6 个
- peer 依赖：react \>= 16\.8\.2
- 首次发布：2022-03-30T13:27:09.181Z
- 最新版本发布：2026-10-29T07:11:12.461Z
- 近 30 天下载量：1965（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：48（近 12 个月 12 个）

## 中文简介

按钮

## 安装

```sh
npm install @asphalt-react/button
```

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

## README

# 按钮

![npm](https://img.shields.io/npm/dt/@asphalt-react/button?style=flat-square) [![npm version](https://badge.fury.io/js/@asphalt-react%2Fbutton.svg)](https://badge.fury.io/js/@asphalt-react%2Fbutton)

按钮提供了一个触发动作的方法. 一个按钮的字幕应该提示它会执行什么动作. 标题一般是文本,但按钮也可以有一个带有文本的图标或仅仅是一个图标(我们称之为图标按钮).

按键标题默认决定其宽度,但也可以拉伸取其容器的宽度. 按钮可以通过互相粘接来形成一个组合,像拆分按钮那样让用户能够使用.

## 使用量

```jsx
import { Button } from '@asphalt-react/button'

<Button>Click me</Button>
```

## 备选案文和意向

按钮分为4个变体来强调不同的关卡:

-   **小学** (默认):强烈呼吁采取行动.
-   **中学**:用于支持主按钮.
-   **高等教育**: 对于比主要行动不重要的行动.
-   **坚果**: 对于不重要的行动.

有3个意图,与上述变体结合,处理多种支持行动:

-   **品牌** (默认):对于大多数推荐的动作.
-   **危险**: 对于删除等具有一定风险要素的行动.
-   **系统**: 建议采取的行动较少.

备选案文和意图是相互排斥的。 如果一个变体或意图不止一次发生,按钮会回到默认值. 例如,使用 `primary` 财务报告和审定财务报表 `nude` {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}我们一起会回到一个 `primary` 变种.

## 大小

按钮支持 4 个大小 : - 额外小(xs) - 小型(s) - 中型(m) - 大型(l)

## 链接为按钮

按钮具有使一个语义链接被取作按钮(我们称之为"链接按钮")的能力. 链接按钮和图标链接按钮——图标作为标题——如果链接在新标签中打开,处理安全和隐私风险.

## 拆分按钮

你可以做一个 [拆分按钮](https://www.nngroup.com/articles/split-buttons/) 组合带有菜单按钮的默认动作按钮.

设定 `stickEnd` 改为 `true` 启动按钮和 `stickStart` 改为 `true` 在结尾按钮.

使用 `stick` 道克在结尾按钮上可选地增强它的风格,以便让默认和菜单按钮一起看起来很好. `stick` 在左侧添加间隔 `primary`, (中文(简体) ), `tertiary` 打开 `nude` 变量按钮,如果 `secondary` 变体可以去掉左边的边框.

```jsx
import { Button } from '@asphalt-react/button'

<div>
    <Button stickEnd>Default action</Button>
    <Button stickStart stick>Menu</Button>
</div>
```

## 无障碍

1.  按钮接受反应 [`ref`](https://reactjs.org/docs/refs-and-the-dom.html) 允许查阅基本内容.
    
2.  他们接受大部分 [按钮元素属性](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) 例如 `disabled` 打开 `onClick` 并支持 [数据 \* 属性](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes)。 。 。 .
    
3.  制取的按钮元素有一个 `type` 属性设置为"按钮". 你可以推翻 `type` 属性,如果需要.
    
4.  所有按钮都具有可聚焦性和键盘可导航性; 选项卡 (或 调动\+ 键选项卡 倒着打的时候.
    
5.  空间 财务报告和审定财务报表 输入 键在焦点时触发按钮.
    
6.  输入 键在焦点时触发链接按钮.
    
7.  所有按钮接受 aria- \* 属性 [按钮角色](https://www.w3.org/TR/wai-aria-1.1/#button)。 。 。 .
    
8.  链接按钮接受 aria- \* 属性 [链接角色](https://www.w3.org/TR/wai-aria-1.1/#link)。 。 。 .
    

## 无障碍必须具备

添加 `aria-label` 或者说 `aria-labelledby` 在图标按钮中帮助辅助技术.

## 道具

### 儿童

响应按钮标题的节点

| 类型 | 所需经费 | 默认 |
| --- | --- | --- |
| 节点 | 真实 | 不详 |

### 小学

渲染为主变体

| 类型 | 所需经费 | 默认 |
| --- | --- | --- |
| 嘘 | 虚假 | 虚假 |

### 中学

渲染为次要变体

| 类型 | 所需经费 | 默认 |
| --- | --- | --- |
| 嘘 | 虚假 | 虚假 |

### 高等教育

第三级变种

| 类型 | 所需经费 | 默认 |
| --- | --- | --- |
| 嘘 | 虚假 | 虚假 |

### 裸着

制作裸体变体

| 类型 | 所需经费 | 默认 |
| --- | --- | --- |
| 嘘 | 虚假 | 虚假 |

### 品牌

品牌意图

| 类型 | 所需经费 | 默认 |
| --- | --- | --- |
| 嘘 | 虚假 | 虚假 |

### 危险

危险意图

| 类型 | 所需经费 | 默认 |
| --- | --- | --- |
| 嘘 | 虚假 | 虚假 |

### 系统

招标系统意图

| 类型 | 所需经费 | 默认 |
| --- | --- | --- |
| 嘘 | 虚假 | 虚假 |

### 链接

创建链接按钮

| 类型 | 所需经费 | 默认 |
| --- | --- | --- |
| 嘘 | 虚假 | 虚假 |

### 作为

链接元素要渲染 。 接受 HTML 元素或反应组件.

| 类型 | 所需经费 | 默认 |
| --- | --- | --- |
| 元素类型 | 虚假 | "一个" |

### 作为选项

接受链接元素的道具和属性.

| 类型 | 所需经费 | 默认 |
| --- | --- | --- |
| 对象 | 虚假 | {赫莱夫:" |

### 图标

渲染图标按钮

| 类型 | 所需经费 | 默认 |
| --- | --- | --- |
| 嘘 | 虚假 | 虚假 |

### 紧凑

缩小按钮的大小,保持内容的大小不变. 适用于有空间约束的用例.

| 类型 | 所需经费 | 默认 |
| --- | --- | --- |
| 嘘 | 虚假 | 虚假 |

### 修饰语

限定符是增强标题的图标或单词. 按键默认预置了修饰符. 为图标接受 SVG 。 离职 `@asphalt-react/iconpack` 用于 SVG 包裹的 React 组件.

> 请勿使用 `qualifier` 生成图标按钮,使用 `icon` 换作道具

| 类型 | 所需经费 | 默认 |
| --- | --- | --- |
| 工会 | 虚假 | 无效 |

### 修饰结束

附加标题的修饰符

| 类型 | 所需经费 | 默认 |
| --- | --- | --- |
| 嘘 | 虚假 | 虚假 |

### 大小

控制按钮大小 。 可能的值分别为"x","s","m","l",分别用于额外的中小和大小

| 类型 | 所需经费 | 默认 |
| --- | --- | --- |
| 语句 | 虚假 | "m" (英语) |

### 缩放

伸开按钮取取容器宽度

| 类型 | 所需经费 | 默认 |
| --- | --- | --- |
| 嘘 | 虚假 | 虚假 |

### 开始

适应让其他按钮坚持启动

| 类型 | 所需经费 | 默认 |
| --- | --- | --- |
| 嘘 | 虚假 | 虚假 |

### 粘结

适应让其他按钮粘到底

| 类型 | 所需经费 | 默认 |
| --- | --- | --- |
| 嘘 | 虚假 | 虚假 |

### 粘贴

增强辅助按钮的样式.

| 类型 | 所需经费 | 默认 |
| --- | --- | --- |
| 嘘 | 虚假 | 虚假 |

### 下划线

链接下加下划线

| 类型 | 所需经费 | 默认 |
| --- | --- | --- |
| 嘘 | 虚假 | 真实 |

## 常见问题

### @asphalt-react/button 是什么？

按钮

### 如何安装 @asphalt-react/button？

在项目目录运行 npm install @asphalt-react/button，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>= 16\.8\.2）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @asphalt-react/button 支持 TypeScript 吗？

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

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

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

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

@asphalt-react/button 使用 UNLICENSED 许可。作者声明为 UNLICENSED，即不授予公开使用许可（与公共领域的 Unlicense 不同）。使用前需获得作者授权。以上为概括，不构成法律意见，请以许可原文为准。

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

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

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

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