---
URL: "/zh/components/button.html"
LLMS_URL: "/zh/components/button.md"
---

# Button 按钮

可点击按钮。

## 组件注册

```js
import { FButton } from '@fesjs/fes-design';

app.use(FButton);
```

## 代码演示

### 基础用法

```vue
<template>
    <FForm labelWidth="100px">
        <FFormItem label="按钮大小:">
            <FRadioGroup
                v-model="size"
                :options="[
                    { label: 'small', value: 'small' },
                    { label: 'middle(默认)', value: 'middle' },
                    { label: 'large', value: 'large' },
                ]"
            />
        </FFormItem>
        <FFormItem label="是否加载状态:">
            <FRadioGroup
                v-model="loading"
                :options="[
                    { label: '否(默认)', value: false },
                    { label: '是', value: true },
                ]"
            />
        </FFormItem>
        <FFormItem label="是否禁用状态:">
            <FRadioGroup
                v-model="disabled"
                :options="[
                    { label: '否(默认)', value: false },
                    { label: '是', value: true },
                ]"
            />
        </FFormItem>
    </FForm>

    <FDivider />

    <FSpace>
        <FButton :size="size" :loading="loading" :disabled="disabled">
            Default
        </FButton>
        <FButton
            type="primary"
            :size="size"
            :loading="loading"
            :disabled="disabled"
        >
            Primary
        </FButton>
        <FButton
            type="text"
            :size="size"
            :loading="loading"
            :disabled="disabled"
        >
            Text
        </FButton>
        <FButton
            type="link"
            :size="size"
            :loading="loading"
            :disabled="disabled"
        >
            Link
        </FButton>
    </FSpace>

    <FDivider />

    <FSpace>
        <FButton
            type="info"
            :size="size"
            :loading="loading"
            :disabled="disabled"
        >
            Info
        </FButton>
        <FButton
            type="success"
            :size="size"
            :loading="loading"
            :disabled="disabled"
        >
            Success
        </FButton>
        <FButton
            type="warning"
            :size="size"
            :loading="loading"
            :disabled="disabled"
        >
            Warning
        </FButton>
        <FButton
            type="danger"
            :size="size"
            :loading="loading"
            :disabled="disabled"
        >
            Danger
        </FButton>
    </FSpace>
</template>

<script setup>
import { ref } from 'vue';

const size = ref('middle');
const loading = ref(false);
const disabled = ref(false);
</script>
```

### Icon 按钮

```vue
<template>
    <FSpace>
        <FButton type="primary" :loading="true">
            <template #icon>
                <ProductOutlined />
            </template>
        </FButton>
        <FButton>
            <template #icon> <ProductOutlined /> </template>Default
        </FButton>
        <FButton type="primary" iconPlacement="right">
            <template #icon> <ProductOutlined /> </template>Primary
        </FButton>
        <FButton type="text">
            <template #icon> <ProductOutlined /> </template>Text
        </FButton>
        <FButton type="link">
            <template #icon> <ProductOutlined /> </template>Link
        </FButton>
    </FSpace>
</template>
```

### long 按钮

```vue
<template>
    <FSpace vertical>
        <FButton size="small" long>Default</FButton>
        <FButton type="info" long>Info</FButton>
        <FButton type="primary" size="large" long>Primary</FButton>
    </FSpace>
</template>
```

## Props

| 属性     | 说明                                                                               | 类型    | 默认值    |
| -------- | ---------------------------------------------------------------------------------- | ------- | --------- |
| disabled | 按钮禁用状态                                                                       | boolean | `false`   |
| size     | 按钮大小，可选值 `small` `middle` `large`                                          | string  | `middle`  |
| htmlType | 设置 `button` 的原生 `type` 值，可选值请参考 HTML 标准                             | string  | `button`  |
| loading  | 按钮加载状态                                                                       | boolean | `false`   |
| long     | 按钮按钮宽度为父元素宽度                                                           | boolean | `false`   |
| throttle | 节流                                                                               | number  | `300`     |
| type     | 设置按钮类型，可选值为 `primary` `text` `link` `info` `success` `warning` `danger` | string  | `default` |
| iconPlacement     | icon位置，可选值为 `left` `right` | string  | `left` |

## Slots

| slot 名称 | 说明     |
| --------- | -------- |
| icon      | 按钮图标 |

## Events

| 事件名称 | 说明         | 回调参数        |
| -------- | ------------ | --------------- |
| click    | 按钮点击事件 | (event) => void |



<script setup>
import Basic from '../../.vitepress/.temp/components/button/basic.vue'
import Icon from '../../.vitepress/.temp/components/button/icon.vue'
import Long from '../../.vitepress/.temp/components/button/long.vue'
</script>


