# Button <small>按钮</small>

## 示例

### 风格

可选的风格 [`ui`](#props-ui) 属性值：`primary` / `strong` / `translucent` / `text` / `icon`。

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

### 尺寸

可选的尺寸 [`ui`](#props-ui) 属性值：`xs` / `s` / `m` / `l` / `xl`。

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

### 禁用状态

设置 [`disabled`](#props-disabled) 来使按钮处于禁用状态。

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

### 加载状态

设置 [`loading`](#props-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`` | 加载状态。 |