Button

Commonly used button.

Basic usage

Disabled Button

The disabled attribute determines if the button is disabled.

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 2.2.0 , 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.

Button Group

Displayed as a button group, can be used to group a series of similar operations.

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.

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

Name	Description	Type	Default
size	button size	`enum`	—
type	button type	`enum`	—
plain	determine whether it's a plain button	`boolean`	false
text 2.2.0	determine whether it's a text button	`boolean`	false
bg 2.2.0	determine whether the text button background color is always on	`boolean`	false
link 2.2.1	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
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`	`enum`	button
auto-insert-space	automatically insert a space between two chinese characters	`boolean`	—
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 2.3.4	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	`object`
size	button size	`object`
type	button type	`object`
disabled	button disabled	`object`
shouldAddSpace	whether adding space	`object`

ButtonGroup API

ButtonGroup Attributes

Name	Description	Type	Default
size	control the size of buttons in this button-group	`enum`	—
type	control the type of buttons in this button-group	`enum`	—

ButtonGroup Slots

Name	Description	Subtags
default	customize button group content	Button

Source

Component • Docs

Contributors

Overview

Border

Button #

Basic usage #

Disabled Button #

Link Button #

Text Button #

Icon Button #

Button Group #

Loading Button #

Sizes #

Tag 2.3.4 #

Custom Color beta #

Button API #

Button Attributes #

Button Slots #

Button Exposes #

ButtonGroup API #

ButtonGroup Attributes #

ButtonGroup Slots #

Source #

Contributors #