Button

Common action button with multiple types, sizes, and shapes.

Basic Usage

loading

Type

Besides default: primary, secondary, accent, success, warning, danger, info, neo, pink, purple, blue, orange, green.

Variant

• solid (default): Filled
• outline: Outlined
• ghost: Transparent background

loading

Size

xs, sm, md, lg, xl.

loading

Shape

• default: Default radius
• round: More rounded
• circle: Circular (often with icon)
• sharp: Square corners

loading

Disabled & Loading

loading

Block

loading

Link

Set href to render the button as a link. Use target="_blank" to open in a new tab.

loading

API

Prop	Description	Type	Default
type	Type	string	'primary'
variant	Variant	'solid' | 'outline' | 'ghost' | 'soft'	'solid'
size	Size	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'
shape	Shape	'default' | 'round' | 'circle' | 'sharp'	'default'
disabled	Disabled	boolean	false
loading	Loading	boolean	false
block	Block	boolean	false
href	Link URL (when rendered as anchor)	string	-
target	Link target, e.g. _blank	string	-

Events

Event	Description
click	Emitted on click