# @hi-ui/button

> A sub-package for @hi-ui/hiui.

Latest version **5.0.0** (published 2026-06-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install @hi-ui/button
pnpm add @hi-ui/button
yarn add @hi-ui/button
bun add @hi-ui/button
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 5.0.0 |
| Published | 2026-06-06 |
| First published | 2021-08-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 119.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 879 |
| Author | HiUI |
| Maintainers | sivan, solarjoker, lanzhi_lee, zhouyun |

## Links

- npm: https://www.npmjs.com/package/@hi-ui/button
- Repository: https://github.com/XiaoMi/hiui
- Homepage: https://github.com/XiaoMi/hiui/tree/master/packages/ui/button#readme
- Issues: https://github.com/XiaoMi/hiui/issues
- npm.io page: https://npm.io/package/@hi-ui/button

## Dependencies (4)

- [@hi-ui/env](https://npm.io/package/@hi-ui/env.md) ^5.0.0
- [@hi-ui/spinner](https://npm.io/package/@hi-ui/spinner.md) ^5.0.0
- [@hi-ui/classname](https://npm.io/package/@hi-ui/classname.md) ^5.0.0
- [@hi-ui/use-merge-semantic](https://npm.io/package/@hi-ui/use-merge-semantic.md) ^5.0.0

## Recent versions

- 5.0.0 (latest) — 2026-06-06
- 5.0.0-rc.0 (rc) — 2026-06-02
- 5.0.0-experimental.1 (experimental) — 2026-03-08
- 5.0.0-canary.14 (canary) — 2026-03-08
- 5.0.0-alpha.0 (alpha) — 2025-09-29
- 4.0.0-beta.17 (feature) — 2022-07-13
- 5.0.0-experimental.0 — 2026-02-05
- 5.0.0-canary.13 — 2025-12-12
- 5.0.0-canary.12 — 2025-11-19
- 5.0.0-canary.11 — 2025-11-12
- 5.0.0-canary.10 — 2025-10-24
- 5.0.0-canary.9 — 2025-09-28
- 5.0.0-canary.8 — 2025-08-21
- 5.0.0-canary.7 — 2025-07-18
- 5.0.0-canary.6 — 2025-07-14
- … 61 more at https://npm.io/package/@hi-ui/button/versions

## README

# Button 按钮

引导用户去触发操作的区域

## 何时使用

用户需要执行有具体含义的动作、命令

连接页面之间、页面和弹窗、页面和浮层面板的跳转

## 使用示例

<!-- Inject Stories -->

## Props

| 参数       | 说明                                          | 类型    | 可选值                                                                    | 默认值    |
| ---------- | --------------------------------------------- | ------- | ------------------------------------------------------------------------- | --------- |
| type       | 设置按钮类型                                  | string  | 'primary' \| 'line' \| 'success' \| 'danger' \| 'default'                 | 'default' |
| appearance | 设置按钮外观                                  | string  | 'link' \| 'button'                                                        | 'button'  |
| disabled   | 设置按钮是否禁用                              | boolean | true \| false                                                             | false     |
| size       | 设置按钮尺寸                                  | string  | 'lg' \| 'md' \| 'sm'                                                      | 'default' |
| icon       | 设置按钮图标                                  | string  | 详见  [`<Icon/>`](https://infra.mioffice.cn/hiui/zh-CN/docs/icon)  组件 ︎ | -         |
| href       | 设置按钮链接，设置后将用 a 标签渲染按钮       | string  | ︎                                                                         | -         |
| target     | 同 a 标签的 target 属性，仅在设置 href 后有效 | string  | ︎'\_self' \| '\_blank' \| '\_parent' \| '\_top'                           | -         |
| loading    | 是否显示 loading                              | boolean | ︎-                                                                        | false     |

## Events

| 名称    | 说明             | 类型                        | 参数                | 返回值 |
| ------- | ---------------- | --------------------------- | ------------------- | ------ |
| onClick | 点击按钮时的回调 | (event: MouseEvent) => void | event: 鼠标事件对象 | -      |

## CHANGELOG

| 参数       | 变更类型 | 变更内容                           | 解决的问题 |
| ---------- | -------- | ---------------------------------- | ---------- |
| type       | update   | 删除'line'，新增'secondary'        |            |
| size       | update   | 变更为 'sm'                        | 'md'       | 'lg' | 'xl' |  |
| appearance | update   | 删除'button'，新增'filled'、'line' |            |
| shape      | feature  | 增加形状 'round'                   | 'square'   |  |

---
_Source: https://npm.io/package/@hi-ui/button · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._