npm package: @rax-ui/button
Description: Rax UI Button
Author: jinli.lyy
Latest version: 1.0.0-beta.62

---
display: Button
family: general
---

# Button

点击后会触发一个操作。


## API

### Button

|名称 | 说明 | 类型 | 默认值 |
|:---------------|:--------|:----|:----------|
| type | 按钮的强调程度类型 <br>可选值：<br> `normal`, `primary`, `secondary`, `warning`, `light`, `dark` | enum | `normal` |
| size | 按钮大小 <br>可选值：<br> `small`, `medium`, `large` | enum | `medium` |
| block | 按钮是否为占满一行 | bool | false |
| text | 是否是纯文字按钮 | bool | false |
| cell | 是否是单元格按钮 | bool | false |
| prefixIcon | 前置图标 | string |  |
| suffixIcon | 后置图标 | string |  |
| disabled | 是否禁用 | bool | false |
| onClick | 按钮被点击时回调 | func | |
| platform | 组件的平台特有样式, 可选值有 `iOS` 或 `Android`, 由 `ConfigPovider` 传入 | enum | `iOS` |
| style | 按钮的 style | object | {} |
| className | 按钮的 className | string | |
| children | 按钮的子元素，可以是 icon 或者文字 | any | |

### Button.Group

|名称 | 说明 | 类型 | 默认值 |
|:---------------|:--------|:----|:----------|
| size | 按钮大小 <br>可选值：<br> `small`, `medium`, `large` | enum | `medium` |
| cell | 是否是单元格按钮 | bool | false |
| buttons | 按钮大小 | ButtonProps[] | `medium` |
| onButtonClick | 按钮点击时的回调 | (index: number, e) => void |

### CSS API

| 名称 | 说明 |
|:---------------|:--------|
| `button` | 默认样式 |
| `button__text` | 文字默认样式 |
| `button__icon` | 图标默认样式
| `button--small` | `size="small"` 的样式 |
| `button--small__text` | `size="small"` 的文字样式 |
| `button--small__icon` | `size="small"` 的图标样式 |
| `button--large` | `size="large"` 的样式 |
| `button--large__text` | `size="large"` 的文字样式 |
| `button--large__icon` | `size="large"` 的图标样式 |
| `button--primary` | `type="primary"` 的样式 |
| `button--primary__text` | `type="primary"` 的文字样式 |
| `button--primary__icon` | `type="primary"` 的图标样式 |
| `button--secondary` | `type="secondary"` 的样式 |
| `button--secondary__text` | `type="secondary"` 的文字样式 |
| `button--secondary__icon` | `type="secondary"` 的图标样式 |
| `button--light` | `type="light"` 的样式 |
| `button--light__text` | `type="light"` 的文字样式 |
| `button--light__icon` | `type="light"` 的图标样式 |
| `button--dark` | `type="dark"` 的样式 |
| `button--dark__text` | `type="dark"` 的文字样式 |
| `button--dark__icon` | `type="dark"` 的图标样式 |
| `button--warning` | `type="warning"` 的样式 |
| `button--warning__text` | `type="warning"` 的文字样式 |
| `button--warning__icon` | `type="warning"` 的图标样式 |
| `button--block` | `block={true}` 的样式 |
| `button--press` | 按下时的样式 |
| `button--press__text` | 按下时的文字样式 |
| `button--press__icon` | 按下时的图标样式 |
| `button--primary--press` | `type="primary"` 按下时的样式 |
| `button--primary--press__text` | `type="primary"` 按下时的文字样式 |
| `button--primary--press__icon` | `type="primary"` 按下时的图标样式 |
| `button--secondary--press` | `type="secondary"` 按下时的样式 |
| `button--secondary--press__text` | `type="secondary"` 按下时的文字样式 |
| `button--secondary--press__icon` | `type="secondary"` 按下时的图标样式 |
| `button--light--press` | `type="light"` 按下时的样式 |
| `button--light--press__text` | `type="light"` 按下时的文字样式 |
| `button--light--press__icon` | `type="light"` 按下时的图标样式 |
| `button--dark--press` | `type="dark"` 按下时的样式 |
| `button--dark--press__text` | `type="dark"` 按下时的文字样式 |
| `button--dark--press__icon` | `type="dark"` 按下时的图标样式 |
| `button--warning--press` | `type="warning"` 按下时的样式 |
| `button--warning--press__text` | `type="warning"` 按下时的文字样式 |
| `button--warning--press__icon` | `type="warning"` 按下时的图标样式 |
| `button--disabled` | `disabled={true}` 的样式 |
| `button--disabled__text` | `disabled={true}` 的文字样式 |
| `button--disabled__icon` | `disabled={true}` 的图标样式 |
| `button--primary--disabled` | `disabled={true} && type="primary"` 的样式 |
| `button--primary--disabled__text` | `disabled={true} && type="primary"` 的文字样式 |
| `button--primary--disabled__icon` | `disabled={true} && type="primary"` 的图标样式 |
| `button--secondary--disabled` | `disabled={true} && type="secondary"` 的样式 |
| `button--secondary--disabled__text` | `disabled={true} && type="secondary"` 的文字样式 |
| `button--secondary--disabled__icon` | `disabled={true} && type="secondary"` 的图标样式 |
| `button--light--disabled` | `disabled={true} && type="light"` 的样式 |
| `button--light--disabled__text` | `disabled={true} && type="light"` 的文字样式 |
| `button--light--disabled__icon` | `disabled={true} && type="light"` 的图标样式 |
| `button--dark--disabled` | `disabled={true} && type="dark"` 的样式 |
| `button--dark--disabled__text` | `disabled={true} && type="dark"` 的文字样式 |
| `button--dark--disabled__icon` | `disabled={true} && type="dark"` 的图标样式 |
| `button--warning--disabled` | `disabled={true} && type="warning"` 的样式 |
| `button--warning--disabled__text` | `disabled={true} && type="warning"` 的文字样式 |
| `button--warning--disabled__icon` | `disabled={true} && type="warning"` 的图标样式 |
| `button--text` | `text={true}` 的样式 |
| `button--text__icon` | `text={true}` 的文字样式 |
| `button--text__text` | `text={true}` 的图标样式 |
| `button--text--small__text` | `text={true} && size="small"` 的文字样式 |
| `button--text--small__icon` | `text={true} && size="small"` 的图标样式 |
| `button--text--primary__text` | `text={true} && type="primary"` 的文字样式 |
| `button--text--primary__icon` | `text={true} && type="primary"` 的图标样式 |
| `button--text--press__text` | `text={true}` 按下时的文字样式 |
| `button--text--press__icon` | `text={true}` 按下时的图标样式 |
| `button--text--disabled__text` | `text={true} && disabled={true}` 的文字样式 |
| `button--text--disabled__icon` | `text={true} && disabled={true}` 的图标样式 |
| `button--text--primary--press__text` | `text={true} && type="primary"` 按下时的文字样式 |
| `button--text--primary--press__icon` | `text={true} && type="primary"` 按下时的图标样式 |
| `button--text--primary--disabled__text` | `text={true} && disabled={true} && type="primary"` 的文字样式 |
| `button--text--primary--disabled__icon` | `text={true} && disabled={true} && type="primary"` 的图标样式 |