Button ​

Commonly used button.

Basic usage ​

Use type, plain, round and circle to define Button's style.

style-3d-neonDisabled 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.

3D按钮 - 具有立体感的按钮
霓虹灯按钮 - 发光边框效果

style-3d-neonDisabled 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.

所有按钮样式综合展示
3D 按钮
霓虹灯按钮
渐变按钮
涟漪按钮
边框动画按钮
脉冲按钮
悬浮按钮
光泽按钮
轮廓按钮
展开按钮
抖动按钮
旋转图标按钮
弹跳按钮
折叠按钮
滑动按钮
气泡按钮
闪烁按钮
翻转按钮
阴影按钮
缩放按钮
hover背景透明到颜色
hover背景颜色到透明

​

Link Button

WARNING

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

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

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 we have to make a new API text: boolean for text button.

Buttons without border and background.

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 find the icon list in 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.

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.

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

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.

Tag 2.3.4 ​

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

Custom Color beta ​

You can custom button color.

We will calculate hover color & active color automatically.

Button API ​

Button Attributes ​

NameDescriptionTypeDefault
sizebutton sizeenum`'large''default''small'`—
typebutton typeenum`'primary''success''warning''danger''info''text' (deprecated)`—
plaindetermine whether it's a plain buttonbooleanfalse
text 2.2.0determine whether it's a text buttonbooleanfalse
bg 2.2.0determine whether the text button background color is always onbooleanfalse
link 2.2.1determine whether it's a link buttonbooleanfalse
rounddetermine whether it's a round buttonbooleanfalse
circledetermine whether it's a circle buttonbooleanfalse
loadingdetermine whether it's loadingbooleanfalse
loading-iconcustomize loading icon componentstring / ComponentLoading
disableddisable the buttonbooleanfalse
iconicon componentstring / Component—
autofocussame as native button'sautofocusbooleanfalse
native-typesame as native button'stypeenum`'button''submit''reset'`button
auto-insert-spaceautomatically insert a space between two chinese charactersboolean—
colorcustom button color, automatically calculatehover and active colorstring—
darkdark mode, which automatically convertscolor to dark mode colorsbooleanfalse
tag 2.3.4custom element tagstring / Componentbutton

Button Slots ​

NameDescription
defaultcustomize default content
loadingcustomize loading component
iconcustomize icon component

Button Exposes ​

NameDescriptionType
refbutton html elementobject
sizebutton sizeobject`ComputedRef<'''small''default''large'>`
typebutton typeobject`ComputedRef<'''default''primary''success''warning''info''danger''text'>`
disabledbutton disabledobject
shouldAddSpacewhether adding spaceobject

ButtonGroup API ​

ButtonGroup Attributes ​

NameDescriptionTypeDefault
sizecontrol the size of buttons in this button-groupenum`'large''default''small'`—
typecontrol the type of buttons in this button-groupenum`'primary''success''warning''danger''info'`—

ButtonGroup Slots ​

NameDescriptionSubtags
defaultcustomize button group contentButton

Source ​

Component • Style • Docs

Contributors ​