Button

Button component enhanced based on Element Plus Button with support for Iconify icons.

Basic Usage

Use type, plain, round, circle and icon to define button styles. (The icon prop supports both Element Plus icons and Iconify icon names (e.g., 'tabler:refresh').)

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

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

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

    <div class="button-row">
      <ep-button icon="tabler:search" circle />
      <ep-button type="primary" icon="tabler:edit" circle />
      <ep-button type="success" icon="tabler:check" circle />
      <ep-button type="info" icon="tabler:message" circle />
      <ep-button type="warning" icon="tabler:star" circle />
      <ep-button type="danger" icon="tabler:trash" circle />
    </div>
  </div>
</template>
<script lang="ts" setup>
defineOptions({
  name: "basic"
})
</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>

Hide Source

Disabled Button

The disabled attribute determines if the button is disabled.

Use disabled attribute to determine whether a button is disabled. It accepts a Boolean value.

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

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

<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>

Hide Source

Link Button

WARNING

type="text" has been deprecated, Element Plus and will be removed in 3.0.0, consider switching to new API.

New API link has been added in Element Plus 2.2.1, you can use type API to set the theme of your link button

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

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

<script setup lang="ts">
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>

Hide Source

Text Button

TIP

Text button has been upgraded with a new design since, if you want to use the previous version like button, you might want to check Link out.

The API is also updated, because the type attribute also represents the button's style. So Element Plus have to make a new API text: boolean for text button.

Buttons without border and background.

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

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

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

<script setup lang="ts">
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>

Hide Source

Icon Button

Use icons to add more meaning to Button. You can use icon alone to save some space, or use it with text.

Use the icon attribute to add icon. You can use Iconify icon names (for example, 'tabler:home') or find the icon list in the Element Plus icon component. Adding icons to the right side of the text is achievable with an <i> tag. Custom icons can be used as well. The following example uses Iconify.

<template>
  <div>
    <ep-button type="primary" icon="tabler:edit" />
    <ep-button type="primary" icon="tabler:share" />
    <ep-button type="primary" icon="tabler:trash" />
    <ep-button type="primary" icon="tabler:search">Search</ep-button>
    <ep-button type="primary">
      Upload<ep-icon class="el-icon--right" icon="tabler:upload" />
    </ep-button>
  </div>
</template>

Hide Source

Button Group

Displayed as a button group, can be used to group a series of similar operations.

Use tag <el-button-group> to group your buttons.

<template>
  <el-button-group class="mb-4">
    <ep-button type="primary" icon="tabler:chevron-left">Previous Page</ep-button>
    <ep-button type="primary">
      Next Page<ep-icon class="el-icon--right" icon="tabler:chevron-right" />
    </ep-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">
    <ep-button type="primary" icon="tabler:smart-home" />
    <ep-button type="primary" icon="tabler:adjustments-horizontal" />
    <ep-button type="primary" icon="tabler:notification" />
  </el-button-group>
</template>

<script setup lang="ts">
import { ref } from "vue"

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

Hide Source

Loading Button

Click the button to load data, then the button displays a loading state.

Set loading attribute to true to display loading state.

TIP

You can use the loading slot or loadingIcon to customize your loading component

ps: loading slot has higher priority than loadingIcon

<template>
  <ep-button type="primary" loading>Loading</ep-button>
  <ep-button type="primary" loading-icon="tabler:loader-3" loading>Loading</ep-button>
  <ep-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: #fff"
          />
        </svg>
      </div>
    </template>
    Loading
  </ep-button>
</template>

<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(--ep-button-text-color);
  stroke-linecap: round;
}
</style>

Hide Source

Sizes

Besides default size, Button component provides three additional sizes for you to choose among different scenarios.

Use attribute size to set additional sizes with large, small.

<template>
  <div class="flex flex-wrap items-center mb-4">
    <ep-button size="large">Large</ep-button>
    <ep-button>Default</ep-button>
    <ep-button size="small">Small</ep-button>
    <ep-button size="large" icon="tabler:search">Search</ep-button>
    <ep-button icon="tabler:search">Search</ep-button>
    <ep-button size="small" icon="tabler:search">Search</ep-button>
  </div>
  <div class="flex flex-wrap items-center mb-4">
    <ep-button size="large" round>Large</ep-button>
    <ep-button round>Default</ep-button>
    <ep-button size="small" round>Small</ep-button>
    <ep-button size="large" icon="tabler:search" round>Search</ep-button>
    <ep-button icon="tabler:search" round>Search</ep-button>
    <ep-button size="small" icon="tabler:search" round>Search</ep-button>
  </div>
  <div class="flex flex-wrap items-center">
    <ep-button icon="tabler:search" size="large" circle />
    <ep-button icon="tabler:search" circle />
    <ep-button icon="tabler:search" size="small" circle />
  </div>
</template>

<script setup lang="ts"></script>

Hide Source

Tag

You can custom element tag, For example button, div, a, router-link, nuxt-link.

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

Hide Source

Button API

Button Attributes

Name	Description	Type	Default
icon	Icon component or iconify icon name	string / Component	—
loading-icon	customize loading icon component	string / Component	Loading

Element Plus Button Attributes

Name	Description	Type	Default
size	button size	enum	—
type	button type, when setting color, the latter prevails	enum	—
plain	determine whether it's a plain button	boolean	false
text	determine whether it's a text button	boolean	false
bg	determine whether the text button background color is always on	boolean	false
link	determine whether it's a link button	boolean	false
round	determine whether it's a round button	boolean	false
circle	determine whether it's a circle button	boolean	false
loading	determine whether it's loading	boolean	false
loading-icon	customize loading icon component	string / Component	Loading
disabled	disable the button	boolean	false
icon	icon component	string / Component	—
autofocus	same as native button's autofocus	boolean	false
native-type	same as native button's type	enum	button
auto-insert-space	automatically insert a space between two chinese characters(this will only take effect when the text length is 2 and all characters are in Chinese.)	boolean	false
color	custom button color, automatically calculate hover and active color	string	—
dark	dark mode, which automatically converts color to dark mode colors	boolean	false
tag	custom element tag	string / Component	button

Button Slots

Element Plus Button Slots

Name	Description
default	customize default content
loading	customize loading component
icon	customize icon component

Button Exposes

Element Plus Button Exposes

Name	Description	Type
ref	button html element	object
size	button size	object
type	button type	object
disabled	button disabled	object
shouldAddSpace	whether adding space	object

ButtonGroup API

ButtonGroup Attributes

Element Plus ButtonGroup Attributes

Name	Description	Type	Default
size	control the size of buttons in this button-group	enum	—
type	control the type of buttons in this button-group	enum	—
direction	display direction	enum	horizontal

ButtonGroup Slots

Element Plus ButtonGroup Slots

Name	Description	Subtags
default	customize button group content	Button