Menu
Button component with various types, sizes, and styles. Invoke when user needs to implement buttons, button groups, or customize button appearance.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Element Plus Skills Library - A comprehensive skill library for AI agents to understand and utilize Element Plus UI components. Invoke when user needs to work with Element Plus components, theming, i18n, dark mode, or design specifications.
Affix component for fixing elements to a specific visible area. Invoke when user needs to create sticky navigation, fixed headers, or elements that remain visible while scrolling.
Alert component for displaying important alert messages. Invoke when user needs to show non-dismissible notifications, status messages, or important information that requires user attention.
Anchor component for anchor navigation. Invoke when user needs to create page anchor navigation, table of contents, or quick navigation to specific sections.
Autocomplete component for input suggestions. Invoke when user needs to provide input suggestions, autocomplete functionality, or search-as-you-type features.
Avatar component for representing people or objects with images, icons, or characters. Invoke when user needs to display user avatars, profile pictures, or entity representations.
| name | el-button |
| description | Button component with various types, sizes, and styles. Invoke when user needs to implement buttons, button groups, or customize button appearance. |
| metadata | {"author":"jiaiyan","version":"1.0.0"} |
Button component for user interactions with multiple types, sizes, and styles.
Invoke this skill when:
| 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 |
| Name | Description |
|---|---|
| default | customize default content |
| loading | customize loading component |
| icon | customize icon component |
| 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> |
| 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 |
| Name | Description | Subtags |
|---|---|---|
| default | customize button group content | Button |
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
When using icons or loading states, button width may change. Set a fixed width:
<el-button style="width: 100px">Button</el-button>
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>
Use dark attribute to enable dark mode color conversion:
<el-button color="#626aef" dark>Dark Mode Button</el-button>
<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>
<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>
<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>