按钮 Button

按钮用于开始一个即时操作

何时使用

响应用户点击行为，触发相应的业务逻辑

按钮类型

七种类型

Default Button

Reverse Button

Primary Button

Danger Button

Dashed Button

Text Button

Link Button

Show Code

vue

<script setup lang="ts">
function onClick(e: Event) {
  console.log('click', e)
}
</script>
<template>
  <Space>
    <Button @click="onClick">Default Button</Button>
    <Button type="reverse">Reverse Button</Button>
    <Button type="primary">Primary Button</Button>
    <Button type="danger">Danger Button</Button>
    <Button type="dashed">Dashed Button</Button>
    <Button type="text">Text Button</Button>
    <Button type="link">Link Button</Button>
  </Space>
</template>

按钮形状 & 图标

Download

Show Code

vue

<script setup lang="ts">
import { h } from 'vue'
import { SearchOutlined, DownloadOutlined } from '@ant-design/icons-vue'
</script>
<template>
  <Space vertical>
    <Space>
      <Tooltip tooltip="search">
        <Button type="primary" shape="circle" :icon="h(SearchOutlined)" />
      </Tooltip>
      <Button type="primary" shape="circle">A</Button>
      <Button type="primary" shape="round" :icon="h(SearchOutlined)"> Search </Button>
      <Tooltip tooltip="search">
        <Button type="primary" shape="round" :icon="h(SearchOutlined)" />
      </Tooltip>
      <Button type="primary" :icon="h(SearchOutlined)"> Search </Button>
    </Space>
    <Space>
      <Tooltip tooltip="search">
        <Button href="https://themusecatcher.blog.csdn.net" target="_blank">
          <template #icon>
            <SearchOutlined />
          </template>
        </Button>
      </Tooltip>
      <Tooltip tooltip="search">
        <Button shape="circle">
          <template #icon>
            <SearchOutlined />
          </template>
        </Button>
      </Tooltip>
      <Button>
        <template #icon>
          <SearchOutlined />
        </template>
        Search
      </Button>
      <Tooltip tooltip="search">
        <Button shape="round">
          <template #icon>
            <SearchOutlined />
          </template>
        </Button>
      </Tooltip>
      <Tooltip tooltip="search">
        <Button type="dashed" shape="circle">
          <template #icon>
            <SearchOutlined />
          </template>
        </Button>
      </Tooltip>
      <Button type="dashed">
        <template #icon>
          <SearchOutlined />
        </template>
        Search
      </Button>
    </Space>
    <Space>
      <Tooltip tooltip="download">
        <Button type="primary">
          <template #icon>
            <DownloadOutlined />
          </template>
        </Button>
      </Tooltip>
      <Tooltip tooltip="download">
        <Button type="primary" shape="circle">
          <template #icon>
            <DownloadOutlined />
          </template>
        </Button>
      </Tooltip>
      <Button type="primary" shape="round">
        <template #icon>
          <DownloadOutlined />
        </template>
        Download
      </Button>
      <Tooltip tooltip="download">
        <Button type="primary" shape="round">
          <template #icon>
            <DownloadOutlined />
          </template>
        </Button>
      </Tooltip>
      <Button type="primary">
        <template #icon>
          <DownloadOutlined />
        </template>
        Download
      </Button>
    </Space>
  </Space>
</template>

幽灵按钮

Primary Ghost Button

Danger Ghost Button

Download

Show Code

vue

<script setup lang="ts">
import { SearchOutlined, DownloadOutlined } from '@ant-design/icons-vue'
</script>
<template>
  <Space>
    <Button type="primary" ghost>Primary Ghost Button</Button>
    <Button type="danger" ghost>Danger Ghost Button</Button>
    <Button type="primary" ghost shape="circle">
      <template #icon>
        <SearchOutlined />
      </template>
    </Button>
    <Button type="primary" ghost shape="round">
      <template #icon>
        <SearchOutlined />
      </template>
      Search
    </Button>
    <Button type="primary" ghost shape="round">
      <template #icon>
        <SearchOutlined />
      </template>
    </Button>
    <Button type="danger" ghost shape="circle">
      <template #icon>
        <DownloadOutlined />
      </template>
    </Button>
    <Button type="danger" ghost shape="round">
      <template #icon>
        <DownloadOutlined />
      </template>
      Download
    </Button>
    <Button type="danger" ghost shape="round">
      <template #icon>
        <DownloadOutlined />
      </template>
    </Button>
  </Space>
</template>

禁用

Disabled state:

Default Button

Reverse Button

Primary Button

Danger Button

Dashed Button

Text Button

Link Button

Primary Ghost Button

Danger Ghost Button

Download

Show Code

vue

<script setup lang="ts">
import { ref } from 'vue'
import { SearchOutlined, DownloadOutlined } from '@ant-design/icons-vue'
const disabled = ref(true)
</script>
<template>
  <Space vertical>
    <Space align="center"> Disabled state:<Switch v-model:value="disabled" /> </Space>
    <Space>
      <Button :disabled="disabled">Default Button</Button>
      <Button :disabled="disabled" type="reverse">Reverse Button</Button>
      <Button :disabled="disabled" type="primary">Primary Button</Button>
      <Button :disabled="disabled" type="danger">Danger Button</Button>
      <Button :disabled="disabled" type="dashed">Dashed Button</Button>
      <Button :disabled="disabled" type="text">Text Button</Button>
      <Button :disabled="disabled" type="link">Link Button</Button>
    </Space>
    <Space>
      <Button :disabled="disabled" type="primary" ghost>Primary Ghost Button</Button>
      <Button :disabled="disabled" type="danger" ghost>Danger Ghost Button</Button>
      <Button :disabled="disabled" type="primary" shape="circle">
        <template #icon>
          <SearchOutlined />
        </template>
      </Button>
      <Button :disabled="disabled" type="primary" shape="round">
        <template #icon>
          <SearchOutlined />
        </template>
        Search
      </Button>
      <Button :disabled="disabled" type="primary" shape="round">
        <template #icon>
          <SearchOutlined />
        </template>
      </Button>
      <Button :disabled="disabled" type="danger" shape="circle">
        <template #icon>
          <DownloadOutlined />
        </template>
      </Button>
      <Button :disabled="disabled" type="danger" shape="round">
        <template #icon>
          <DownloadOutlined />
        </template>
        Download
      </Button>
      <Button :disabled="disabled" type="danger" shape="round">
        <template #icon>
          <DownloadOutlined />
        </template>
      </Button>
    </Space>
  </Space>
</template>

按钮尺寸

smallmiddlelarge

Default Button

Reverse Button

Primary Button

Danger Button

Dashed Button

Text Button

Link Button

Primary Button

Danger Button

Primary Ghost Button

Danger Ghost Button

Download

Show Code

vue

<script setup lang="ts">
import { ref } from 'vue'
import { SearchOutlined, DownloadOutlined } from '@ant-design/icons-vue'
const sizeOptions = [
  {
    label: 'small',
    value: 'small'
  },
  {
    label: 'middle',
    value: 'middle'
  },
  {
    label: 'large',
    value: 'large'
  }
]
const size = ref('middle')
</script>
<template>
  <Space vertical>
    <RadioGroup :options="sizeOptions" v-model:value="size" button button-style="solid" />
    <Space>
      <Button :size="size">Default Button</Button>
      <Button :size="size" type="reverse">Reverse Button</Button>
      <Button :size="size" type="primary">Primary Button</Button>
      <Button :size="size" type="danger">Danger Button</Button>
    </Space>
    <Space>
      <Button :size="size" type="dashed">Dashed Button</Button>
      <Button :size="size" type="text">Text Button</Button>
      <Button :size="size" type="link">Link Button</Button>
    </Space>
    <Space>
      <Button :size="size" type="primary" ghost>Primary Button</Button>
      <Button :size="size" type="danger" ghost>Danger Button</Button>
      <Button :size="size" type="primary" ghost loading>Primary Ghost Button</Button>
      <Button :size="size" type="danger" ghost loading>Danger Ghost Button</Button>
    </Space>
    <Space>
      <Button :size="size" type="primary" ghost>
        <template #icon>
          <SearchOutlined />
        </template>
      </Button>
      <Button :size="size" type="primary" ghost shape="circle">
        <template #icon>
          <SearchOutlined />
        </template>
      </Button>
      <Button :size="size" type="primary" ghost shape="round">
        <template #icon>
          <SearchOutlined />
        </template>
        Search
      </Button>
      <Button :size="size" type="primary" ghost shape="round">
        <template #icon>
          <SearchOutlined />
        </template>
      </Button>
      <Button :size="size" type="primary" ghost>
        <template #icon>
          <SearchOutlined />
        </template>
        Search
      </Button>
    </Space>
    <Space>
      <Button :size="size" type="danger">
        <template #icon>
          <DownloadOutlined />
        </template>
      </Button>
      <Button :size="size" type="danger" shape="circle">
        <template #icon>
          <DownloadOutlined />
        </template>
      </Button>
      <Button :size="size" type="danger" shape="round">
        <template #icon>
          <DownloadOutlined />
        </template>
        Download
      </Button>
      <Button :size="size" type="danger" shape="round">
        <template #icon>
          <DownloadOutlined />
        </template>
      </Button>
      <Button :size="size" type="danger">
        <template #icon>
          <DownloadOutlined />
        </template>
        Download
      </Button>
    </Space>
  </Space>
</template>

自定义颜色

Loading state:

#d4380d

#faad14

#ff6900

#18a058

Show Code

vue

<script setup lang="ts">
import { ref } from 'vue'
import { CrownOutlined } from '@ant-design/icons-vue'
const customLoading = ref(false)
</script>
<template>
  <Space vertical>
    <Space align="center"> Loading state:<Switch v-model:value="customLoading" /> </Space>
    <Space>
      <Button type="reverse" color="#d4380d" :loading="customLoading">
        <template #icon>
          <CrownOutlined />
        </template>
        #d4380d
      </Button>
      <Button type="primary" color="#faad14" :loading="customLoading">
        <template #icon>
          <CrownOutlined />
        </template>
        #faad14
      </Button>
      <Button ghost type="primary" color="#ff6900" :loading="customLoading">
        <template #icon>
          <CrownOutlined />
        </template>
        #ff6900
      </Button>
      <Button type="primary" shape="round" color="#18a058" :loading="customLoading">
        <template #icon>
          <CrownOutlined />
        </template>
        #18a058
      </Button>
    </Space>
  </Space>
</template>

自定义跳转

Vue Amazing UI

Button Component

My CSDN Blogs

Show Code

vue

<template>
  <Space>
    <Button type="primary" ghost href="https://themusecatcher.github.io/vue-amazing-ui/" target="_blank">
      <template #icon>
        <img style="width: 1em; height: 1em" src="https://themusecatcher.github.io/vue-amazing-ui/amazing-logo.svg" />
      </template>
      Vue Amazing UI
    </Button>
    <Button
      type="primary"
      href="https://themusecatcher.github.io/vue-amazing-ui/guide/components/button.html"
      target="_blank"
    >
      Button Component
    </Button>
    <Button type="primary" ghost shape="round" href="https://themusecatcher.blog.csdn.net" target="_blank">
      My CSDN Blogs
    </Button>
  </Space>
</template>

加载中状态

Loading state:

Loading type:

staticdynamic

Default Button

Reverse Button

Primary Button

Danger Button

Dashed Button

Text Button

Link Button

Primary Ghost Button

Danger Ghost Button

Download

Show Code

vue

<script setup lang="ts">
import { ref } from 'vue'
import { SearchOutlined, DownloadOutlined } from '@ant-design/icons-vue'
const loading = ref(true)
const loadingOptions = [
  {
    label: 'static',
    value: 'static'
  },
  {
    label: 'dynamic',
    value: 'dynamic'
  }
]
const loadingType = ref('dynamic')
</script>
<template>
  <Space vertical>
    <Space align="center"> Loading state:<Switch v-model:value="loading" /> </Space>
    <Space align="center"> Loading type:<RadioGroup :options="loadingOptions" v-model:value="loadingType" /> </Space>
    <Space>
      <Button :loading="loading" :loading-type="loadingType">Default Button</Button>
      <Button type="reverse" :loading="loading" :loading-type="loadingType">Reverse Button</Button>
      <Button type="primary" :loading="loading" :loading-type="loadingType">Primary Button</Button>
      <Button type="danger" :loading="loading" :loading-type="loadingType">Danger Button</Button>
    </Space>
    <Space>
      <Button type="dashed" :loading="loading" :loading-type="loadingType">Dashed Button</Button>
      <Button type="text" :loading="loading" :loading-type="loadingType">Text Button</Button>
      <Button type="link" :loading="loading" :loading-type="loadingType">Link Button</Button>
    </Space>
    <Space>
      <Button type="primary" ghost :loading="loading" :loading-type="loadingType">Primary Ghost Button</Button>
      <Button type="danger" ghost :loading="loading" :loading-type="loadingType">Danger Ghost Button</Button>
    </Space>
    <Space>
      <Button type="primary" :loading="loading" :loading-type="loadingType">
        <template #icon>
          <SearchOutlined />
        </template>
      </Button>
      <Button type="primary" shape="circle" :loading="loading" :loading-type="loadingType">
        <template #icon>
          <SearchOutlined />
        </template>
      </Button>
      <Button type="primary" shape="round" :loading="loading" :loading-type="loadingType">
        <template #icon>
          <SearchOutlined />
        </template>
        Search
      </Button>
      <Button type="primary" shape="round" :loading="loading" :loading-type="loadingType">
        <template #icon>
          <SearchOutlined />
        </template>
      </Button>
      <Button type="danger" ghost :loading="loading" :loading-type="loadingType">
        <template #icon>
          <DownloadOutlined />
        </template>
      </Button>
      <Button type="danger" ghost shape="circle" :loading="loading" :loading-type="loadingType">
        <template #icon>
          <DownloadOutlined />
        </template>
      </Button>
      <Button type="danger" ghost shape="round" :loading="loading" :loading-type="loadingType">
        <template #icon>
          <DownloadOutlined />
        </template>
        Download
      </Button>
      <Button type="danger" ghost shape="round" :loading="loading" :loading-type="loadingType">
        <template #icon>
          <DownloadOutlined />
        </template>
      </Button>
    </Space>
  </Space>
</template>

block 按钮

Default Button

Primary Button

Danger Button

Primary Button

Danger Button

Show Code

vue

<template>
  <Space>
    <Button block>Default Button</Button>
    <Button block type="primary" shape="round">Primary Button</Button>
    <Button block type="danger" shape="round">Danger Button</Button>
    <Button block type="primary" ghost>Primary Button</Button>
    <Button block type="danger" ghost>Danger Button</Button>
  </Space>
</template>

APIs

Button

参数	说明	类型	默认值
type	设置按钮类型	'default' \| 'reverse' \| 'primary' \| 'danger' \| 'dashed' \| 'text' \| 'link'	'default'
shape	设置按钮形状	'default' \| 'circle' \| 'round'	'default'
icon	设置按钮图标，`prop` 支持 `VNode` / 渲染函数；插槽形态请用同名 `#icon` 插槽	VNode \| (() => VNode)	undefined
size	设置按钮尺寸	'small' \| 'middle' \| 'large'	'middle'
ghost	按钮背景是否透明，仅当 `type: 'primary' \| 'danger'` 时生效	boolean	false
buttonClass	设置按钮类名	string	undefined
color	按钮颜色	string	undefined
href	点击跳转的地址，与 `a` 链接的 `href` 属性一致	string	undefined
target	如何打开目标链接，相当于 `a` 链接的 `target` 属性，`href` 存在时生效	'_self' \| '_blank'	'_self'
keyboard	是否支持键盘操作	boolean	true
disabled	是否禁用	boolean	false
loading	是否加载中	boolean	false
loadingType	加载指示符类型	'static' \| 'dynamic'	'dynamic'
block	是否将按钮宽度调整为其父宽度	boolean	false

Slots

名称	说明	用法
default	自定义按钮内容	v-slot:default
icon	自定义按钮图标	v-slot:icon

Events

名称	说明	类型
click	点击按钮时的回调	(e: Event) => void

按钮 Button ​

何时使用 ​

按钮类型 ​

按钮形状 & 图标 ​

幽灵按钮 ​

禁用 ​

按钮尺寸 ​

自定义颜色 ​

自定义跳转 ​

加载中状态 ​

block 按钮 ​

APIs ​

Button ​

Slots ​

Events ​

按钮 Button

何时使用

按钮类型

按钮形状 & 图标

幽灵按钮

禁用

按钮尺寸

自定义颜色

自定义跳转

加载中状态

block 按钮

APIs

Button

Slots

Events