Button 按钮 ​

常用的操作按钮。

ts
import { createApp } from 'vue'
import { ElButton, ElButtonGroup } from '@szhn/dh-design-pc'

const app = createApp()
app.use(ElButton)
app.use(ElButtonGroup)

基础用法 ​

使用 type, plain, round, dashed, outline 和 circle 来定义按钮的样式。

<template>
  <div class="button-example">
    <div class="button-row">
      <el-button>Default</el-button>
      <el-button type="primary">Primary</el-button>
      <el-button type="success">Success</el-button>
      <el-button type="info">Info</el-button>
      <el-button type="warning">Warning</el-button>
      <el-button type="danger">Danger</el-button>
    </div>

    <div class="button-row">
      <el-button plain>Plain</el-button>
      <el-button type="primary" plain>Primary</el-button>
      <el-button type="success" plain>Success</el-button>
      <el-button type="info" plain>Info</el-button>
      <el-button type="warning" plain>Warning</el-button>
      <el-button type="danger" plain>Danger</el-button>
    </div>

    <div class="button-row">
      <el-button round>Round</el-button>
      <el-button type="primary" round>Primary</el-button>
      <el-button type="success" round>Success</el-button>
      <el-button type="info" round>Info</el-button>
      <el-button type="warning" round>Warning</el-button>
      <el-button type="danger" round>Danger</el-button>
    </div>

    <div class="button-row">
      <el-button dashed>Dashed</el-button>
      <el-button type="primary" dashed>Primary</el-button>
      <el-button type="success" dashed>Success</el-button>
      <el-button type="info" dashed>Info</el-button>
      <el-button type="warning" dashed>Warning</el-button>
      <el-button type="danger" dashed>Danger</el-button>
    </div>

    <div class="button-row">
      <el-button outline>Outline</el-button>
      <el-button type="primary" outline>Primary</el-button>
      <el-button type="success" outline>Success</el-button>
      <el-button type="info" outline>Info</el-button>
      <el-button type="warning" outline>Warning</el-button>
      <el-button type="danger" outline>Danger</el-button>
    </div>

    <div class="button-row">
      <el-button :icon="Search" circle />
      <el-button type="primary" :icon="Edit" circle />
      <el-button type="success" :icon="Check" circle />
      <el-button type="info" :icon="Message" circle />
      <el-button type="warning" :icon="Star" circle />
      <el-button type="danger" :icon="Delete" circle />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Check, Delete, Edit, Message, Search, Star } from '@szhn/dh-design-pc/icons'
import { ElButton } from '@szhn/dh-design-pc'
</script>

<style scoped>
.button-example {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.button-row > * {
  margin: 0;
}
</style>

面性按钮 ​

面性按钮通过填充背景色传达最强的视觉信号，是页面中核心行动召唤的首选。使用 type 属性指定色相（如 primary），结合 round 属性可切换为圆角样式；不传 type 时默认为无色相的中性样式。

<template>
  <div class="btn-styles">
    <div class="btn-styles__row">
      <span class="btn-styles__tag">有色相 · 有 icon</span>
      <div class="btn-styles__pair">
        <el-button type="primary" :icon="Loading">操作按钮</el-button>
        <el-button type="primary" :icon="Loading" round>操作按钮</el-button>
      </div>
    </div>
    <div class="btn-styles__row">
      <span class="btn-styles__tag">有色相 · 无 icon</span>
      <div class="btn-styles__pair">
        <el-button type="primary">操作按钮</el-button>
        <el-button type="primary" round>操作按钮</el-button>
      </div>
    </div>
    <div class="btn-styles__row">
      <span class="btn-styles__tag">无色相 · 有 icon</span>
      <div class="btn-styles__pair">
        <el-button :icon="Loading">操作按钮</el-button>
        <el-button :icon="Loading" round>操作按钮</el-button>
      </div>
    </div>
    <div class="btn-styles__row">
      <span class="btn-styles__tag">无色相 · 无 icon</span>
      <div class="btn-styles__pair">
        <el-button>操作按钮</el-button>
        <el-button round>操作按钮</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Loading } from '@szhn/dh-design-pc/icons'
import { ElButton } from '@szhn/dh-design-pc'
</script>

<style scoped>
.btn-styles {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.btn-styles__row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.btn-styles__tag {
  width: 120px;
  flex-shrink: 0;
  font-size: 12px;
  color: var(--vp-c-text-2);
}

.btn-styles__pair {
  display: flex;
  gap: 12px;
  align-items: center;
}
</style>

线性按钮 ​

线性按钮保留描边、背景透明，视觉层级低于面性按钮，适合辅助操作或次级行为。使用 outline 属性启用线性样式，结合 type 属性指定色相，结合 round 属性切换圆角。

<template>
  <div class="btn-styles">
    <div class="btn-styles__row">
      <span class="btn-styles__tag">有色相 · 有 icon</span>
      <div class="btn-styles__pair">
        <el-button type="primary" outline :icon="Loading">操作按钮</el-button>
        <el-button type="primary" outline :icon="Loading" round>操作按钮</el-button>
      </div>
    </div>
    <div class="btn-styles__row">
      <span class="btn-styles__tag">有色相 · 无 icon</span>
      <div class="btn-styles__pair">
        <el-button type="primary" outline>操作按钮</el-button>
        <el-button type="primary" outline round>操作按钮</el-button>
      </div>
    </div>
    <div class="btn-styles__row">
      <span class="btn-styles__tag">无色相 · 有 icon</span>
      <div class="btn-styles__pair">
        <el-button outline :icon="Loading">操作按钮</el-button>
        <el-button outline :icon="Loading" round>操作按钮</el-button>
      </div>
    </div>
    <div class="btn-styles__row">
      <span class="btn-styles__tag">无色相 · 无 icon</span>
      <div class="btn-styles__pair">
        <el-button outline>操作按钮</el-button>
        <el-button outline round>操作按钮</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Loading } from '@szhn/dh-design-pc/icons'
import { ElButton } from '@szhn/dh-design-pc'
</script>

<style scoped>
.btn-styles {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.btn-styles__row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.btn-styles__tag {
  width: 120px;
  flex-shrink: 0;
  font-size: 12px;
  color: var(--vp-c-text-2);
}

.btn-styles__pair {
  display: flex;
  gap: 12px;
  align-items: center;
}
</style>

按鈕状态 ​

三种状态覆盖操作结果的语义场景：危险用于删除、禁用等不可逆操作；警告用于生效风险或二次确认场景；成功用于保存生效、提交完成等正向操作。

<template>
  <div class="btn-states">
    <div v-for="state in states" :key="state.type" class="btn-states__row">
      <span class="btn-states__label">{{ state.label }}</span>
      <el-button :type="state.type">操作按钮</el-button>
      <el-button :type="state.type" plain>操作按钮</el-button>
      <el-button :type="state.type" outline>操作按钮</el-button>
      <el-button :type="state.type" link>操作按钮</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElButton } from '@szhn/dh-design-pc'

const states = [
  { type: 'danger', label: '危险' },
  { type: 'warning', label: '警告' },
  { type: 'success', label: '成功' },
] as const
</script>

<style scoped>
.btn-states {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.btn-states__row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-states__label {
  width: 40px;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--vp-c-text-1);
}
</style>

禁用状态 ​

你可以使用 disabled 属性来定义按鈕是否被禁用。

使用 disabled 属性来控制按鈕是否为禁用状态。 该属性接受一个 Boolean 类型的値。

<template>
  <div class="btn-disabled">
    <div v-for="type in types" :key="type.value" class="btn-disabled__row">
      <el-button v-if="type.value" :type="type.value" disabled>操作按钮</el-button>
      <el-button :type="type.value" plain disabled>操作按钮</el-button>
      <el-button :type="type.value" outline disabled>操作按钮</el-button>
      <el-button :type="type.value" link disabled>操作按钮</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ElButton } from '@szhn/dh-design-pc'

const types = [
  { value: 'primary' },
  { value: 'danger' },
  { value: 'warning' },
  { value: 'success' },
  { value: '' },
] as const
</script>

<style scoped>
.btn-disabled {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.btn-disabled__row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
</style>

链接按钮 ​

WARNING

type="text" 已被 废弃，将于版本 3.0.0 时 移除，请考虑切换至新的 API。

新的 API link 于 2.2.1 版本时添加，你可以使用 type API 设置链接按钮的主题样式

<template>
  <p>Basic link button</p>
  <div class="mb-4">
    <el-button
      v-for="button in buttons"
      :key="button.text"
      :type="button.type"
      link
    >
      {{ button.text }}
    </el-button>
  </div>

  <p>Disabled link button</p>
  <div>
    <el-button
      v-for="button in buttons"
      :key="button.text"
      :type="button.type"
      link
      disabled
    >
      {{ button.text }}
    </el-button>
  </div>
</template>

<script setup lang="ts">
import { ElButton } from '@szhn/dh-design-pc'

const buttons = [
  { type: '', text: 'plain' },
  { type: 'primary', text: 'primary' },
  { type: 'success', text: 'success' },
  { type: 'info', text: 'info' },
  { type: 'warning', text: 'warning' },
  { type: 'danger', text: 'danger' },
] as const
</script>

<style scoped>
p {
  margin: 0 0 8px;
  color: var(--vp-c-text-2);
  font-size: 14px;
}
.mb-4 {
  margin-bottom: 16px;
}
</style>

文字按钮 ​

TIP

文字按钮在现在有了全新的设计样式。 如果您想要使用老版样式的按钮，可以考虑使用 Link 组件。

API 也已更新，由于 type 属性会同时控制按钮的样式，因此我们通过一个新的 API text: boolean 来控制文字按钮。

没有边框和背景色的按钮。

<template>
  <p>Basic text button</p>
  <div class="mb-4">
    <el-button
      v-for="button in buttons"
      :key="button.text"
      :type="button.type"
      text
    >
      {{ button.text }}
    </el-button>
  </div>

  <p>Background color always on</p>
  <div class="mb-4">
    <el-button
      v-for="button in buttons"
      :key="button.text"
      :type="button.type"
      text
      bg
    >
      {{ button.text }}
    </el-button>
  </div>

  <p>Disabled text button</p>
  <div>
    <el-button
      v-for="button in buttons"
      :key="button.text"
      :type="button.type"
      text
      disabled
    >
      {{ button.text }}
    </el-button>
  </div>
</template>

<script setup lang="ts">
import { ElButton } from '@szhn/dh-design-pc'

const buttons = [
  { type: '', text: 'plain' },
  { type: 'primary', text: 'primary' },
  { type: 'success', text: 'success' },
  { type: 'info', text: 'info' },
  { type: 'warning', text: 'warning' },
  { type: 'danger', text: 'danger' },
] as const
</script>

<style scoped>
p {
  margin: 0 0 8px;
  color: var(--vp-c-text-2);
  font-size: 14px;
}
.mb-4 {
  margin-bottom: 16px;
}
</style>

图标按钮 ​

使用图标为按钮添加更多的含义。 你也可以单独使用图标不添加文字来节省显示区域占用。

使用 icon 属性来为按钮添加图标。 您可以在我们的 Icon 组件中找到所需图标。 通过向右方添加 <i> 标签来添加图标，你也可以使用自定义图标。

<template>
  <div>
    <el-button type="primary" :icon="Edit" />
    <el-button type="primary" :icon="Share" />
    <el-button type="primary" :icon="Delete" />
    <el-button type="primary" :icon="Search">Search</el-button>
    <el-button type="primary">
      Upload<el-icon class="el-icon--right"><upload-icon /></el-icon>
    </el-button>
  </div>
</template>

<script setup lang="ts">
import { Delete, Edit, Search, Share, Upload as UploadIcon } from '@szhn/dh-design-pc/icons'
import { ElButton, ElIcon } from '@szhn/dh-design-pc'
</script>

按钮组 ​

以按钮组的方式出现，常用于多项类似操作。

在 2.11.9 中，您可以使用 direction 属性。

使用 <el-button-group> 对多个按钮分组。

<template>
  <el-button-group class="mb-4">
    <el-button type="primary" :icon="ArrowLeft">Previous Page</el-button>
    <el-button type="primary">
      Next Page<el-icon class="el-icon--right"><ArrowRight /></el-icon>
    </el-button>
  </el-button-group>
  <br />
  <el-radio-group v-model="direction" class="mb-2">
    <el-radio value="horizontal">Horizontal</el-radio>
    <el-radio value="vertical">Vertical</el-radio>
  </el-radio-group>
  <br />

  <el-button-group :direction="direction">
    <el-button type="primary" :icon="House" />
    <el-button type="primary" :icon="Operation" />
    <el-button type="primary" :icon="Notification" />
  </el-button-group>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ArrowLeft, ArrowRight, House, Notification, Operation } from '@szhn/dh-design-pc/icons'
import { ElButton, ElButtonGroup, ElIcon, ElRadio, ElRadioGroup } from '@szhn/dh-design-pc'

const direction = ref<'horizontal' | 'vertical'>('horizontal')
</script>

<style scoped>
.mb-4 {
  margin-bottom: 16px;
}
.mb-2 {
  margin-bottom: 8px;
}
</style>

加载状态按钮 ​

点击按钮来加载数据，并向用户反馈加载状态。

通过设置 loading 属性为 true 来显示加载中状态。

TIP

您可以使用 loading 插槽或 loadingIcon 属性自定义您的 loading 图标

ps: loading 插槽优先级高于 loadingIcon 属性

<template>
  <el-button type="primary" loading>Loading</el-button>
  <el-button type="primary" :loading-icon="Eleme" loading>Loading</el-button>
  <el-button type="primary" loading>
    <template #loading>
      <div class="custom-loading">
        <svg class="circular" viewBox="-10, -10, 50, 50">
          <path
            class="path"
            d="
            M 30 15
            L 28 17
            M 25.61 25.61
            A 15 15, 0, 0, 1, 15 30
            A 15 15, 0, 1, 1, 27.99 7.5
            L 15 15
          "
            style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"
          />
        </svg>
      </div>
    </template>
    Loading
  </el-button>
</template>

<script lang="ts" setup>
import { Eleme } from '@szhn/dh-design-pc/icons'
import { ElButton } from '@szhn/dh-design-pc'
</script>

<style scoped>
.el-button .custom-loading .circular {
  margin-right: 6px;
  width: 18px;
  height: 18px;
  animation: loading-rotate 2s linear infinite;
}
.el-button .custom-loading .circular .path {
  animation: loading-dash 1.5s ease-in-out infinite;
  stroke-dasharray: 90, 150;
  stroke-dashoffset: 0;
  stroke-width: 2;
  stroke: var(--el-button-text-color);
  stroke-linecap: round;
}
</style>

调整尺寸 ​

除了默认的大小，按钮组件还提供了几种额外的尺寸可供选择，以便适配不同的场景。

使用 size 属性额外配置尺寸，可使用 large 和 small 两种值。

<template>
  <div class="flex-row mb-4">
    <el-button size="large">Large</el-button>
    <el-button>Default</el-button>
    <el-button size="small">Small</el-button>
    <el-button size="large" :icon="Search">Search</el-button>
    <el-button :icon="Search">Search</el-button>
    <el-button size="small" :icon="Search">Search</el-button>
  </div>
  <div class="flex-row mb-4">
    <el-button size="large" round>Large</el-button>
    <el-button round>Default</el-button>
    <el-button size="small" round>Small</el-button>
    <el-button size="large" :icon="Search" round>Search</el-button>
    <el-button :icon="Search" round>Search</el-button>
    <el-button size="small" :icon="Search" round>Search</el-button>
  </div>
  <div class="flex-row">
    <el-button :icon="Search" size="large" circle />
    <el-button :icon="Search" circle />
    <el-button :icon="Search" size="small" circle />
  </div>
</template>

<script setup lang="ts">
import { Search } from '@szhn/dh-design-pc/icons'
import { ElButton } from '@szhn/dh-design-pc'
</script>

<style scoped>
.flex-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.mb-4 {
  margin-bottom: 16px;
}
</style>

圆角 ​

使用 radius 属性指定按钮圆角档位，支持 2、4、6、8、12、16 和全圆角。

<template>
  <div class="button-radius-demo">
    <div
      v-for="item in radiusItems"
      :key="item.label"
      class="button-radius-demo__row"
    >
      <span class="button-radius-demo__label">{{ item.label }}</span>
      <el-button type="primary" :radius="item.value">主要按钮</el-button>
      <el-button outline :radius="item.value">线性按钮</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElButton } from '@szhn/dh-design-pc'

const radiusItems = [
  { label: '2px', value: 2 },
  { label: '4px', value: 4 },
  { label: '6px', value: 6 },
  { label: '8px', value: 8 },
  { label: '12px', value: 12 },
  { label: '16px', value: 16 },
  { label: '全圆角', value: 'full' },
] as const
</script>

<style scoped>
.button-radius-demo {
  display: grid;
  gap: 12px;
}

.button-radius-demo__row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.button-radius-demo__label {
  width: 56px;
  color: var(--vp-c-text-2);
  font-size: 12px;
}
</style>

Tag (2.3.4) ​

您可以自定义元素标签。例如，按钮，div，路由链接，nuxt 链接。

<template>
  <el-button>button</el-button>
  <el-button tag="div" role="button" tabindex="0">div</el-button>
  <el-button
    type="primary"
    tag="a"
    href="https://github.com/element-plus/element-plus"
    target="_blank"
    rel="noopener noreferrer"
  >
    a
  </el-button>
</template>

<script setup lang="ts">
import { ElButton } from '@szhn/dh-design-pc'

</script>

自定义颜色 (beta) ​

您可以自定义按钮的颜色。

我们将自动计算按钮处于 hover 和 active 状态时的颜色。

自 2.13.7 起，color 属性也适用于 link 和 text 按钮。

<template>
  <div>
    <el-button color="#626aef">Default</el-button>
    <el-button color="#626aef" plain>Plain</el-button>
    <el-button color="#626aef" link>Link</el-button>
    <el-button color="#626aef" text>Text</el-button>
    <el-button color="#626aef" text bg>Text BG</el-button>

    <el-button color="#626aef" disabled>Disabled</el-button>
    <el-button color="#626aef" disabled plain>
      Disabled Plain
    </el-button>
    <el-button color="#626aef" disabled link>
      Disabled Link
    </el-button>
    <el-button color="#626aef" disabled text>
      Disabled Text
    </el-button>
    <el-button color="#626aef" disabled text bg>
      Disabled Text BG
    </el-button>
  </div>
</template>

<script lang="ts" setup>
import { ElButton } from '@szhn/dh-design-pc'

</script>

Button API ​

Button Attributes ​

属性名说明类型默认值
size尺寸enum 'large' | 'default' | 'small'—
type按钮类型，在设置 color 时，后者优先。enum 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info' | '' | 'text'(deprecated)—
plain是否为朴素按钮booleanfalse
text (2.2.0)是否为文字按钮booleanfalse
bg (2.2.0)是否显示文字按钮背景颜色booleanfalse
link (2.2.1)是否为链接按钮booleanfalse
round是否为圆角按钮booleanfalse
circle是否为圆形按钮booleanfalse
radius按钮圆角档位enum—
dashed (2.13.3)是否是虚线按钮booleanfalse
outline是否为线性按钮（透明背景 + 有色描边）booleanfalse
loading是否为加载中状态booleanfalse
loading-icon自定义加载中状态图标组件string / ComponentLoading
disabled按钮是否为禁用状态booleanfalse
icon图标组件string / Component—
autofocus原生 autofocus 属性booleanfalse
native-type原生 type 属性enum 'button' | 'submit' | 'reset'button
auto-insert-space两个中文字符之间自动插入空格（仅当文本长度为 2 且所有字符均为中文时才生效）booleanfalse
color自定义按钮颜色，并自动计算 hover 和 active 触发后的颜色。自 2.13.7 起，支持 link/text 按钮。string—
darkdark 模式，意味着自动设置 color 为 dark 模式的颜色booleanfalse
tag (2.3.4)自定义元素标签string / Componentbutton

Button Slots ​

插槽名说明
default自定义默认内容
loading自定义加载中组件
icon自定义图标组件

Button Exposes ​

属性名说明类型
ref按钮 html 元素object Ref<HTMLButtonElement>
size按钮尺寸object ComputedRef<'' | 'small' | 'default' | 'large'>
type按钮类型object ComputedRef<'' | 'default' | 'primary' | 'success' | 'warning' | 'info' | 'danger' | 'text'>
disabled按钮已禁用object ComputedRef<boolean>
shouldAddSpace是否在两个字符之间插入空格object ComputedRef<boolean>

ButtonGroup API ​

ButtonGroup Attributes ​

属性名说明类型默认值
size用于控制该按钮组内按钮的大小enum 'large' | 'default' | 'small'—
type用于控制该按钮组内按钮的类型enum 'primary' | 'success' | 'warning' | 'danger' | 'info'—
direction (2.11.9)展示的方向enum 'horizontal' | 'vertical'horizontal

ButtonGroup Slots ​

插槽名说明子标签
default自定义按钮组内容Button