# Button <small>按钮</small>

## 示例

### 风格

可选的风格 `ui` 属性值：`primary`/`strong`/`translucent`/`text`/`icon`。

[[ demo src="/demo/button/style.vue" ]]

### 尺寸

可选的尺寸 `ui` 属性值：`xs`/`s`/`m`/`l`/`xl`。

[[ demo src="/demo/button/size.vue" ]]

### 禁用状态

设置 `disabled` 来使按钮处于禁用状态。

[[ demo src="/demo/button/disabled.vue" ]]

### 加载状态

设置 `loading` 来使按钮处于加载状态，无法点击。

[[ demo src="/demo/button/loading.vue" ]]

## API

### 属性

| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| `ui` | `string=` | - | [^ui] |
| `disabled` | `boolean=` | `false` | 是否为禁用状态。 |
| `type` | `string=` | `'button'` | [^type] |
| `loading` | `boolean=` | `false` | 是否处于加载状态。加载状态下按钮不响应用户交互。 |

^^^ui
预设样式。为空格分隔的一组枚举值的组合。

+++枚举值
| 值 | 描述 |
| -- | -- |
| `normal` | 普通按钮，为默认样式。 |
| `primary` | 主要按钮，背景显示为主题色。 |
| `basic` | 基础按钮。 |
| `strong` | 加强样式。可单独使用，也可配合 `text`/`icon` 样式使用。 |
| `translucent` | 半透明样式，用于深色背景。 |
| `text` | 纯文字样式，没有背景色及边框。 |
| `icon` | 纯图标样式，没有背景色及边框。 |
| `aux` | 辅助按钮，用于配合 `text`/`icon` 样式使用。 |
| `square` | 方形按钮。可配合其它样式一同使用。 |
| `xs` | 超小尺寸样式。 |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
| `l` | 大尺寸样式。 |
| `xl` | 超大尺寸样式。 |
+++
^^^

^^^type
按钮类型。参见原生 `<button>` 元素的 [`type`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/button#attr-type)。

+++枚举值
| 值 | 描述 |
| -- | -- |
| `button` | 普通按钮。 |
| `submit` | 提交按钮，点击会触发外部表单提交。 |
| `reset` | 重置按钮，点击会触发外部表单重置为初始值。 |
+++

:::warning
注意，默认值与原生 `<button>` 元素不同。需要触发表单提交时请显式设置为 `submit`。
:::
^^^

### 插槽

| 名称 | 描述 |
| -- | -- |
| `default` | 按钮上显示的内容。 |

### 事件

`Button` 组件支持所有原生 `<button>` 元素支持的原生事件，回调函数的参数均为相应的原生事件对象。

### 图标

| 名称 | 描述 |
| -- | -- |
| `loading` | 加载状态。 |