🌏 Translated with the assistance of DeepSeek and ChatGPT

Button

A common button, a control to trigger functions.

Button Themes

The button offers various themes: 'primary' (default), 'success', 'warning', 'danger', 'info', 'sakura' and 'notice'.

Hide source code

Button Variants

The button is available in four style variants: 'primary' (default), 'plain', 'outline', and 'text'.

Hide source code

Button Shapes

The button comes in four shapes: 'rect' (default), 'round', 'circle', and 'square'.

Hide source code

Button Sizes

The button's style can be adjusted using the size prop, which offers three options: 'medium' (default), 'small', and 'large'.

Hide source code

Disabled Status

disabled prop can disables the button.

Hide source code

Loading Status

loading sets whether the button is in a loading state. When true, the button's native disabled attribute becomes "true" and the button will not respond to click events.

Hide source code

Button Icon

Set the button icon via the icon slot.

Hide source code

Full Width

Setting the block property makes the button take up the full line.

Hide source code

Custom Color

Custom primary color: the component will generate a complete color palette based on it, and this palette takes precedence over the preset palettes provided by theme. See Supported Color Parsing.

Hide source code

Rounded Corner Border

borderRadius sets the button's rounded corners, has a higher priority than shape, and behaves consistently with CSS border-radius.

Due to limited time and technical resources, custom border-radius still needs optimization, but it does not affect overall usability.

• A single value or an array of length 1 → applies to all four corners simultaneously;
• An array of length 2 → [top-left & bottom-right, top-right & bottom-left];
• An array of length 3 → [top-left, top-right & bottom-left, bottom-right];
• An array of length 4 → applies to the four corners in a clockwise order.

Hide source code

Button Group

Use the ButtonGroup component to group buttons together like this.

Hide source code

API

ButtonProps

Attribute	Type	Optional	Default	Description	Version
borderRadius	NumberOrPercentage | NumberOrPercentage[]	True		Corner radius, takes precedence over shape and behaves like CSS border-radius. A single value or an array of length 1 → applies to all four corners simultaneously; an array of length 2 → [top-left & bottom-right, top-right & bottom-left]; an array of length 3 → [top-left, top-right & bottom-left, bottom-right]; an array of length 4 → applies to the four corners in a clockwise order.	0.0.0-beta
shape	'rect' | 'round' | 'circle' | 'square'	True	'rect'	Button shape.	0.0.3
size	'medium' | 'large' | 'small'	True	'medium'	Button size.	0.0.0-beta
disabled	boolean	True	false	Whether the button is disabled.	0.0.0-beta
loading	boolean	True	false	Whether the button is in a loading state.	0.0.0-beta
variant	'primary' | 'plain' | 'text' | 'outline'	True	'primary'	Button style variant.	0.0.0-beta
theme	'primary' | 'sakura' | 'success' | 'warning' | 'danger' | 'info' | 'notice'	True	'primary'	Button theme.	0.0.0-beta
color	string	True		Custom primary color. The component will generate a complete color palette based on it, and this palette takes precedence over the preset palettes provided by theme. See Supported Color Parsing.	0.0.0-beta
block	boolean	True	false	Whether to take up the full line.	0.0.0-beta
nativeType	'button' | 'submit' | 'reset'	True	'button'	Native HTML <button> type attribute.	0.0.0-beta
autofocus	boolean	True	false	Native HTML <button> autofocus attribute.	0.0.0-beta
pollSizeChange	boolean	True	false	Enables polling for component size changes. This may impact performance.	0.1.0

ButtonEvents

Event	Parameter	Description	Version
click	e: MouseEvent	Click event.	0.0.0-beta

ButtonSlots

Slot	Parameter	Description	Version
default		The button's content.	0.0.0-beta
icon		The button's icon.	0.0.0-beta

ButtonGroupProps

Attribute	Type	Optional	Default	Description	Version
borderRadius	NumberOrPercentage | NumberOrPercentage[]	True		Corner radius, takes precedence over shape, overrides the borderRadius of Button child components; rounding only affects the outer borders on both sides of Button child components; behaves like CSS border-radius. A single value or an array of length 1 → applies to all four corners simultaneously; an array of length 2 → [top-left & bottom-right, top-right & bottom-left]; an array of length 3 → [top-left, top-right & bottom-left, bottom-right]; an array of length 4 → applies to the four corners in a clockwise order.	0.0.0-beta
shape	'rect' | 'round' | 'square' | 'circle'	True		Button shape, overrides the shape of the Button child components, rounding only affects the outer borders on both sides of the Button child components.	0.0.0-beta
size	'medium' | 'large' | 'small'	True	'medium'	Button size, overrides the size of the Button child components.	0.0.3
disabled	boolean	True	false	Whether to disable. The Button sub-component's disabled and this prop are OR-ed to decide if the sub-component is disabled.	0.0.0-beta
loading	boolean	True	false	Whether to show loading state. The Button sub-component's loading and this prop are OR-ed to decide if the sub-component is in loading state.	0.0.0-beta
variant	'primary' | 'plain' | 'text' | 'outline'	True		Button style variant. The Button sub-component's variant and this prop are OR-ed to decide the style variant of the sub-component.	0.0.0-beta
theme	'primary' | 'sakura' | 'success' | 'warning' | 'danger' | 'info' | 'notice'	True			0.0.0-beta
pollSizeChange	boolean	True	false	Enables polling for component size changes. This also affects the property of the same name in Button sub-components.	0.1.0

ButtonGroupSlots

Slot	Parameter	Description	Version
default		The sub-buttons.	0.0.0-beta

NumberOrPercentage

export type NumberOrPercentage = number | `${number}%`