# li-button

<!-- Auto Generated Below -->

## Usage

### Javascript

<!-- Default -->

<li-button>Default</li-button>

<!-- Colors -->

<li-button color="primary">Primary</li-button>
<li-button color="success">Success</li-button>
<li-button color="warning">Warning</li-button>

## Properties

| Property        | Attribute        | Description                                                                 | Type                                               | Default     |
| --------------- | ---------------- | --------------------------------------------------------------------------- | -------------------------------------------------- | ----------- |
| `circle`        | `circle`         | 表示按钮为圆形                                                              | `boolean`                                          | `false`     |
| `color`         | `color`          | 代表按钮颜色 {Color}                                                        | `"default" \| "primary" \| "success" \| "warning"` | `'default'` |
| `disabled`      | `disabled`       | 如果值为true，表示按钮禁用 {boolean}                                        | `boolean \| undefined`                             | `false`     |
| `download`      | `download`       | 可选属性 要下载的文件名 {string}                                            | `string \| undefined`                              | `undefined` |
| `href`          | `href`           | 可选属性，有该属性时，按钮使用<a>标签表示 {string}                          | `string \| undefined`                              | `undefined` |
| `iconOnly`      | `icon-only`      | 值为true时表示按钮只包含一个icon {boolean}                                  | `boolean \| undefined`                             | `false`     |
| `iconPosition`  | `icon-position`  | 表示按钮上图标位置。默认为：'before' {('before' \| 'after')}                | `"after" \| "before"`                              | `'before'`  |
| `innerTabindex` | `inner-tabindex` | 在内联按钮或<a>链接元素上设定tabindex的值 {number}                          | `number \| undefined`                              | `undefined` |
| `name`          | `name`           | 按钮名，与按钮值一起作为命值对，在表单提交时作为表单数据的一部分 {string}   | `string \| undefined`                              | `undefined` |
| `size`          | `size`           | 可选属性 按钮大小 默认值为'large' {('small' \| 'large')}                    | `"large" \| "small"`                               | `'large'`   |
| `styles`        | `styles`         | 注入的style样式字符串 {string}                                              | `string \| undefined`                              | `undefined` |
| `target`        | `target`         | 可选属性，但按钮为<a>标签时，表示连接打开的目标窗口 {string}                | `string \| undefined`                              | `'_self'`   |
| `tooltip`       | `tooltip`        | 提示信息                                                                    | `string \| undefined`                              | `undefined` |
| `type`          | `type`           | 按钮类型 {('submit' \| 'reset' \| 'button')}                                | `"button" \| "reset" \| "submit" \| undefined`     | `undefined` |
| `value`         | `value`          | 按钮值，与按钮名称一起作为命值对，在表单提交时作为表单数据的一部分 {string} | `string \| undefined`                              | `undefined` |
| `variant`       | `variant`        | 按钮变体，默认值 'primary' {string}                                         | `string \| undefined`                              | `'primary'` |

## Events

| Event     | Description  | Type                      |
| --------- | ------------ | ------------------------- |
| `liBlur`  | 失去焦点触发 | `CustomEvent<FocusEvent>` |
| `liFocus` | 获得焦点触发 | `CustomEvent<FocusEvent>` |

## Methods

### `setFocus() => Promise<void>`

---

## 8.应用Method()装饰器的公共方法

#### Returns

Type: `Promise<void>`

## Dependencies

### Used by

- [li-data-grid](../data-grid)

### Graph

```mermaid
graph TD;
  li-data-grid --> li-button
  style li-button fill:#f9f,stroke:#333,stroke-width:4px
```

---

_Built with ITSI_
