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背景颜色到透明

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 ​