Vue 3 Element Plus Buttons Example

In this tutorial, we will explore Element Plus Buttons components with Vue.js 3. We will examine plain rounded and circular buttons, as well as buttons with icons.

Install Element Plus in Vue 3 with TypeScript

Vue 3 Element Plus Buttons Example

1. Vue 3 Element Plus: Use type, plain, round, and circle to define the Button’s style.

Vue

<template>
    <el-row justify="center">
        <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>
    </el-row>

    <el-row justify="center">
        <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>
    </el-row>

    <el-row justify="center">
        <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>
    </el-row>

    <el-row justify="center">
        <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 />
    </el-row>
</template>

<script lang="ts" setup>
import {
    Check,
    Delete,
    Edit,
    Message,
    Search,
    Star,
} from '@element-plus/icons-vue'
</script>

2. Vue 3 Element Plus UI disabled buttons.

Vue

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

3. Vue 3 Element Plus UI links buttons.

Vue

<template>
    <p>Basic link button</p>
    <div class="flex justify-space-between mb-4 flex-wrap gap-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 class="flex justify-space-between flex-wrap gap-4">
        <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">
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>

4. Vue 3 Element Plus UI text buttons.

Vue

<template>
    <el-row justify="center">
        <el-col :span="8">
            <p>Basic text button</p>
            <div>
                <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>
                <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>
        </el-col>
    </el-row>
</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>

5. Vue 3 Element Plus UI buttons with icons.

Vue

<template>
    <el-row justify="center">
        <el-col :span="8">
            <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 />
                    </el-icon>
                </el-button>
            </div>
        </el-col>
    </el-row>
</template>
<script setup lang="ts">
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
</script>

vue 3 element plus ui buttons with icons

6. Vue 3 Element Plus UI buttons with sizes.

Vue

<template>
    <el-row>
        <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>
    </el-row>
    <el-row class="my-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>
    </el-row>
    <el-row>
        <el-button :icon="Search" size="large" circle />
        <el-button :icon="Search" circle />
        <el-button :icon="Search" size="small" circle />
    </el-row>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
</script>

7. Vue 3 Element Plus UI loading state buttons.

Vue

<template>
  <el-row justify="center">
    <el-col :span="8">
      <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>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import { Eleme } from "@element-plus/icons-vue";
</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>

Javed sheikh

Hello there! I’m Javed Sheikh, a frontend developer with a passion for crafting seamless user experiences. With expertise in JavaScript frameworks like Vue.js, Svelte, and React, I bring creativity and innovation to every project I undertake. From building dynamic web applications to optimizing user interfaces,