# @edux-design/buttons 中文文档

规范地址：https://npmcn.com/package/%40edux-design/buttons/

版本：0\.3\.4
npm 元数据更新时间：2026-11-03T10:57:55.164Z
中文译文更新时间：2026-11-14T07:05:50.467Z
软件包许可：未声明

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

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

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

- 包体积（解压后）：127 kB，9 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：2 个
- peer 依赖：react ^19\.1\.0，react-dom ^19\.1\.0，@edux-design/tokens ^0\.2\.3
- 首次发布：2025-09-10T02:42:59.329Z
- 最新版本发布：2026-11-03T10:57:54.941Z
- 近 30 天下载量：2175（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：17（近 12 个月 14 个）

## 中文简介

无头按键原始人接通了Edux设计标志. 货包装有五个部件:

## 安装

```sh
npm install @edux-design/buttons
```

也可以使用：`pnpm add @edux-design/buttons`、`yarn add @edux-design/buttons`、`bun add @edux-design/buttons`

## README

# @ edux 设计/ 按钮

无头按键原始人接通了Edux设计标志. 货包装有五个部件:

-   `Button` - 有大小 + 变体帮助器的主动作按钮.
-   `IconButton` - 只有圆形图标的按钮表面.
-   `MenuButton` - 语义菜单触发按钮.
-   `ButtonGroup` - 带有滑动活性状态的分块控制,用于背景过滤.
-   `ButtonCounter` - 可选择编辑值的增减控制.

所有东西都是通过分享来建造的 `cx` 帮助者如此造型与系统其他部分保持一致.

* * *

## 安装

```bash
pnpm add @edux-design/buttons @edux-design/utils
# or
npm install @edux-design/buttons @edux-design/utils
```

端点 : `@edux-design/tokens@>=0.2.0 <0.3.0`, (中文(简体) ), `react@^19.1.0`, (中文(简体) ), `react-dom@^19.1.0`。 。 。 .

* * *

## 使用量

```jsx
import {
  Button,
  ButtonCounter,
  ButtonGroup,
  ButtonGroupItem,
  IconButton,
  MenuButton,
} from "@edux-design/buttons";
import { Close, Warning } from "@edux-design/icons";

export function Actions({ menuOpen, setMenuOpen }) {
  return (
    <div className="flex gap-4">
      <Button size="small">Save</Button>
      <Button isSecondary isStretched>
        Cancel
      </Button>
      <Button isDanger disabled>
        Delete
      </Button>
      <IconButton icon={<Close aria-hidden="true" />} aria-label="Close dialog" />
      <MenuButton
        aria-expanded={menuOpen}
        aria-controls="actions-menu"
        onClick={() => setMenuOpen((prev) => !prev)}
      >
        Options
      </MenuButton>
      <ButtonCounter defaultValue={2} min={1} aria-label="Quantity" />
    </div>
  );
}

export function SegmentedFilter() {
  const [value, setValue] = React.useState("inbox");

  return (
    <ButtonGroup value={value} onChange={(nextValue) => setValue(nextValue)}>
      <ButtonGroupItem value="inbox">Inbox (11)</ButtonGroupItem>
      <ButtonGroupItem value="drafts">Drafts (11)</ButtonGroupItem>
      <ButtonGroupItem
        value="alerts"
        endAdornment={<Warning className="h-4 w-4 text-warning-600" />}
      >
        Alerts
      </ButtonGroupItem>
    </ButtonGroup>
  );
}
```

### 无障碍说明

-   `IconButton` 需要通过 `aria-label` 或者说 `aria-labelledby`。 。 。 .
-   `MenuButton` 成为本地人 `<button>` 默认 `aria-haspopup` 改为 `"menu"`。 。 。 .
-   `ButtonGroup` 使用有旋转的无线电组语义 `tabIndex` 并支持箭头键加主/端.
-   `ButtonCounter` 通过显示模式的标签输出和原生输出来显示其值 `spinbutton` 在可编辑模式中.

### 关键道具

| 构成部分 | 重要道具 |
| --- | --- |
| `Button` | “大小=”小 |
| `IconButton` | `icon`, (中文(简体) ), `size`, (中文(简体) ), `isBare`, (中文(简体) ), `isDanger`, (中文(简体) ), `disabled`, (中文(简体) ), `aria-label` 编号 : `aria-labelledby` |
| `MenuButton` | 本地按钮道具, `size`, (中文(简体) ), `caret`, (中文(简体) ), `aria-expanded`, (中文(简体) ), `aria-controls` |
| `ButtonGroup` | `value` 编号 : `defaultValue`, (中文(简体) ), `onChange`, (中文(简体) ), `size`, (中文(简体) ), `isStretched`,每个选项 `startAdornment` 编号 : `endAdornment`, (中文(简体) ), `disabled` |
| `ButtonCounter` | `value` 编号 : `defaultValue`, (中文(简体) ), `min`, (中文(简体) ), `max`, (中文(简体) ), `step`, (中文(简体) ), `isEditable`, (中文(简体) ), `inputProps` |

按钮在开发中警告,如果你通过相冲突的变体布林斯,那么你知道哪种风格获胜. `IconButton` 也警告它是否缺少一个无障碍的名称.

### 共享控制大小

按键组件将其公共大小名称映射到语义控制大小合同 `@edux-design/tokens`数字 :

| 公共规模 | 调试工具 | 计算大小 |
| --- | --- | --- |
| `small` | `control-sm` | `36px` |
| `medium` | `control-md` | `44px` |
| `large` | `control-lg` | `56px` |

`Button` 使用共享高度, `IconButton` 按钮的控件使用共享平方大小,以及 `MenuButton` 使用共享最小高度。 具体组成部分的内容宽度仍为其组成部分所拥有.

* * *

## 发展

```bash
pnpm --filter @edux-design/buttons lint
pnpm --filter @edux-design/buttons check-types
pnpm --filter @edux-design/buttons build
```

故事就住在这下面 `src/demo` (例如 `Button.stories.jsx` 财务报告和审定财务报表 `ButtonGroup.stories.jsx`用于快速视觉验证.

## 其他构成部分

[工具栏控件](https://npmcn.com/package/%40edux-design/buttons/docs/toolbar.md)。 。 。 .

`Button` 合并 `className` 使用共享的默认值后 `cx` 合同,作为 `IconButton` 已经 主机公用事业遵循现有的共享合并规则. 使用 `size` 标准 控制高度; 故意的 Tailwind 重要工具, 如 `h-32!` 或一个 本地语言 `style` 能够覆盖语义几何。 键盘焦点保持正常语义阴影并获得2px系统 `Highlight` 带有2px被强制颜色所抵消的大纲。 保持明显的焦点 (b) 故意压倒重点公用事业的指标.

## 常见问题

### @edux-design/buttons 是什么？

无头按键原始人接通了Edux设计标志\. 货包装有五个部件:

### 如何安装 @edux-design/buttons？

在项目目录运行 npm install @edux-design/buttons，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^19\.1\.0）、react-dom（^19\.1\.0）、@edux-design/tokens（^0\.2\.3）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @edux-design/buttons 支持 TypeScript 吗？

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

### @edux-design/buttons 支持 ESM 还是 CommonJS？

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

### @edux-design/buttons 可以商用吗？

@edux-design/buttons 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。

### @edux-design/buttons 的下载量有多少？

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

### @edux-design/buttons 还在维护吗？

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