el-button

Element Plus Button Component

Button component for user interactions with multiple types, sizes, and styles.

When to Invoke

Invoke this skill when:

User needs to implement a button with specific type or style
User wants to create button groups
User needs loading or disabled state buttons
User wants to customize button colors
User asks about button icons or accessibility

Features

Multiple Types: default, primary, success, warning, danger, info
Multiple Sizes: large, default, small
Style Variants: plain, round, circle, dashed, text, link
States: loading, disabled
Custom Colors: automatic hover/active color calculation
Button Groups: horizontal or vertical grouping
Icon Support: prefix icons and custom loading icons
Tag Customization: custom element tag (button, a, router-link, etc.)

API Reference

Button Attributes

Name	Description	Type	Default
size	button size	`'large' \| 'default' \| 'small'`	—
type	button type, when setting `color`, the latter prevails	`'default' \| 'primary' \| 'success' \| 'warning' \| 'danger' \| 'info' \| '' \| 'text' (deprecated)`	—
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
dashed	determine whether it's a dashed 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`	`'button' \| 'submit' \| 'reset'`	button
auto-insert-space	automatically insert a space between two chinese characters	`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

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

Button Exposes

Name	Description	Type
ref	button html element	`Ref<HTMLButtonElement>`
size	button size	`ComputedRef<'' \| 'small' \| 'default' \| 'large'>`
type	button type	`ComputedRef<'' \| 'default' \| 'primary' \| 'success' \| 'warning' \| 'info' \| 'danger' \| 'text'>`
disabled	button disabled	`ComputedRef<boolean>`
shouldAddSpace	whether adding space	`ComputedRef<boolean>`

ButtonGroup Attributes

Name	Description	Type	Default
size	control the size of buttons in this button-group	`'large' \| 'default' \| 'small'`	—
type	control the type of buttons in this button-group	`'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'`	—
direction	display direction	`'horizontal' \| 'vertical'`	horizontal

ButtonGroup Slots

Name	Description	Subtags
default	customize button group content	Button

Usage Examples

Basic Button Types

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

Plain Buttons

<template>
  <el-row class="mb-4">
    <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="warning" plain>Warning</el-button>
    <el-button type="danger" plain>Danger</el-button>
    <el-button type="info" plain>Info</el-button>
  </el-row>
</template>

Round Buttons

<template>
  <el-row class="mb-4">
    <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="warning" round>Warning</el-button>
    <el-button type="danger" round>Danger</el-button>
    <el-button type="info" round>Info</el-button>
  </el-row>
</template>

Circle Buttons

<template>
  <el-row class="mb-4">
    <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 setup>
import { Search, Edit, Check, Message, Star, Delete } from '@element-plus/icons-vue'
</script>

Disabled Button

<template>
  <el-row class="mb-4">
    <el-button disabled>Default</el-button>
    <el-button type="primary" disabled>Primary</el-button>
    <el-button type="success" disabled>Success</el-button>
  </el-row>
</template>

Loading Button

<template>
  <el-row class="mb-4">
    <el-button type="primary" :loading="loading" @click="handleClick">
      {{ loading ? 'Loading...' : 'Click me' }}
    </el-button>
  </el-row>
</template>

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

const loading = ref(false)

const handleClick = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 2000)
}
</script>

Button Sizes

<template>
  <el-row class="mb-4">
    <el-button size="large">Large</el-button>
    <el-button>Default</el-button>
    <el-button size="small">Small</el-button>
  </el-row>
</template>

Button Group

<template>
  <el-button-group>
    <el-button type="primary" :icon="ArrowLeft">Previous</el-button>
    <el-button type="primary">
      Next<el-icon class="el-icon--right"><ArrowRight /></el-icon>
    </el-button>
  </el-button-group>

  <el-button-group class="ml-4">
    <el-button type="primary" :icon="Edit" />
    <el-button type="primary" :icon="Share" />
    <el-button type="primary" :icon="Delete" />
  </el-button-group>
</template>

<script setup>
import { ArrowLeft, ArrowRight, Edit, Share, Delete } from '@element-plus/icons-vue'
</script>

Vertical Button Group

<template>
  <el-button-group direction="vertical">
    <el-button type="primary">Top</el-button>
    <el-button type="primary">Middle</el-button>
    <el-button type="primary">Bottom</el-button>
  </el-button-group>
</template>

Custom Color

<template>
  <el-row class="mb-4">
    <el-button color="#626aef">Default</el-button>
    <el-button color="#626aef" plain>Plain</el-button>
    <el-button color="#626aef" disabled>Disabled</el-button>
  </el-row>
</template>

Text Button

<template>
  <el-row class="mb-4">
    <el-button text>Text Button</el-button>
    <el-button text bg>Text Button with Background</el-button>
    <el-button type="primary" text>Primary Text</el-button>
  </el-row>
</template>

Link Button

<template>
  <el-row class="mb-4">
    <el-button link>Default Link</el-button>
    <el-button type="primary" link>Primary Link</el-button>
    <el-button type="success" link>Success Link</el-button>
    <el-button type="warning" link>Warning Link</el-button>
    <el-button type="danger" link>Danger Link</el-button>
    <el-button type="info" link>Info Link</el-button>
  </el-row>
</template>

Custom Tag

<template>
  <el-row class="mb-4">
    <el-button tag="div">Div Button</el-button>
    <el-button type="primary" tag="a" href="https://element-plus.org">
      A Link Button
    </el-button>
    <el-button type="success" tag="router-link" to="/home">
      Router Link
    </el-button>
  </el-row>
</template>

Common Issues

1. Button Width Not Consistent

When using icons or loading states, button width may change. Set a fixed width:

<el-button style="width: 100px">Button</el-button>

2. Text Button Deprecated Warning

type="text" is deprecated. Use text attribute instead:

<!-- Deprecated -->
<el-button type="text">Text Button</el-button>

<!-- Recommended -->
<el-button text>Text Button</el-button>

3. Custom Color in Dark Mode

Use dark attribute to enable dark mode color conversion:

<el-button color="#626aef" dark>Dark Mode Button</el-button>

Component Interactions

With Form

<template>
  <el-form>
    <el-form-item>
      <el-button type="primary" native-type="submit">Submit</el-button>
      <el-button native-type="reset">Reset</el-button>
    </el-form-item>
  </el-form>
</template>

With Dialog

<template>
  <el-button type="primary" @click="dialogVisible = true">
    Open Dialog
  </el-button>
  
  <el-dialog v-model="dialogVisible">
    <template #footer>
      <el-button @click="dialogVisible = false">Cancel</el-button>
      <el-button type="primary" @click="handleConfirm">Confirm</el-button>
    </template>
  </el-dialog>
</template>

With Loading State

<template>
  <el-button 
    type="primary" 
    :loading="submitting" 
    @click="handleSubmit"
  >
    {{ submitting ? 'Submitting...' : 'Submit' }}
  </el-button>
</template>

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

const submitting = ref(false)

const handleSubmit = async () => {
  submitting.value = true
  try {
    await submitData()
  } finally {
    submitting.value = false
  }
}
</script>

Best Practices

Use semantic types: Use appropriate type for different actions (primary for main actions, danger for destructive actions)
Provide feedback: Use loading state for async operations
Accessibility: Add aria-label for icon-only buttons
Consistent sizing: Use consistent sizes within the same context
Button groups: Use ButtonGroup for related actions