Button

Commonly used button

Basic usage

Use primary, secondary, ghost and rounded to define button's style

Button Icon

Use icons to add more meaning to Button. You can use icon alone to save some space, or use it with text. You can use BigIn Icon or any iconset from iconify via unocss preset

Button States

Button can be disabled or loading for blocking any actions

Button Sizes

Besides default size, Button component provides two additional sizes for you to choose among different scenarios.

Button Group

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

Button Attributes

Attribute	Description	Type	Accepted Values	Default
primary	determine whether it's a primary button	boolean	—	false
secondary	determine whether it's a secondary button	boolean	—	false
ghost	determine whether it's a ghost button	boolean	—	false
rounded	determine whether it's a rounded button	boolean	—	false
large	determine whether it's a large button	boolean	—	false
small	determine whether it's a small button	boolean	—	false
xlarge	determine whether it's a xlarge icon button	boolean	—	false
xsmall	determine whether it's a xsmall icon button	boolean	—	false
xxsmall	determine whether it's a xxsmall icon 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	—	—
prefix-icon	prefix icon component	string / Component	—	—
suffix-icon	suffix icon component	string / Component	—	—
autofocus	same as native button's autofocus	boolean	—	false
native-type	same as native button's type	string	button / submit / reset	button

Button Slots

Name	Description
—	customize default content
loading	customize loading component
icon	customize icon component
prefixIcon	customize icon component
suffixIcon	customize icon component

Button-Group Attributes

Attribute	Description	Type	Accepted Values	Default
rounded	rounded style	boolean	—	false
compact	no extra horizontal spacings	boolean	—	false
size	control the size of buttons in this button-group	string	same as button's size	—
type	control the type of buttons in this button-group	string	same as button's type	—

Button-Group Slots

Name	Description	Subtags
-	customize button group content	Button