🌏 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'.

<template>
	<px-space>
		<px-button>Primary</px-button>
		<px-button theme="notice">Notice</px-button>
		<px-button theme="success">Success</px-button>
		<px-button theme="warning">Warning</px-button>
		<px-button theme="danger">Danger</px-button>
		<px-button theme="info">Info</px-button>
		<px-button theme="sakura">Sakura</px-button>
	</px-space>
</template>

Button Variants

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

<template>
	<px-space direction="vertical">
		<px-space v-for="variant in variants" :key="variant" style="margin-bottom: 8px">
			<px-button
				v-for="theme in themes"
				:key="theme"
				:variant="variant !== 'default' ? variant : undefined"
				:theme="theme !== 'default' ? theme : undefined"
				style="margin-right: 8px"
			>
				{{ variantLabels[variant] }}
			</px-button>
		</px-space>
	</px-space>
</template>

<script setup>
const variants = ['default', 'plain', 'outline', 'text']
const themes = ['default', 'success', 'warning', 'danger', 'info', 'sakura', 'notice']
const variantLabels = {
	default: 'Primary',
	plain: 'Plain',
	outline: 'Outline',
	text: 'Text'
}
</script>

Button Shapes

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

<template>
	<px-space>
		<px-button>Default</px-button>
		<px-button theme="notice" shape="round">Round</px-button>
		<px-button shape="circle">C</px-button>
		<px-button theme="notice" shape="square">S</px-button>
	</px-space>
</template>

Button Sizes

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

<template>
	<px-space>
		<px-button size="small">Small</px-button>
		<px-button theme="success">Default</px-button>
		<px-button size="large">Large</px-button>
	</px-space>
</template>

Disabled Status

disabled prop can disables the button.

<template>
	<px-button disabled>No Allow</px-button>
</template>

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.

<template>
	<px-space>
		<px-button style="margin-right: 8px" loading>Loading</px-button>
		<px-button loading disabled>Loading</px-button>
	</px-space>
</template>

Button Icon

Set the button icon via the icon slot.

<template>
	<px-button>
		<template #icon>
			<IconMinds></IconMinds>
		</template>
		Icon
	</px-button>
</template>
<script setup lang="ts">
import { IconMinds } from '@pixelium/web-vue/icon-hn/es'
</script>

Full Width

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

<template>
	<px-button block>Block</px-button>
</template>

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. It supports CSS-like strings such as 'rgb(r, g, b)' and 'rgba(r, g, b, a)', as well as 3-, 4-, 6-, and 8-digit hexadecimal values.

<template>
	<px-space>
		<px-button color="#409EFF">#409EFF</px-button>
		<px-button color="#FAE13C">#FAE13C</px-button>
		<px-button color="#E956AE">#E956AE</px-button>
		<px-button color="#909399">#909399</px-button>
	</px-space>
</template>

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.

<template>
	<px-space>
		<px-button :border-radius="12">12</px-button>
		<px-button :border-radius="[12, 8]">[12, 8]</px-button>
		<px-button :border-radius="[12, 8, 20]">[12, 8, 20]</px-button>
		<px-button :border-radius="[20, 8, 20, 16]">[20, 8, 20, 16]</px-button>
	</px-space>
</template>

Button Group

Use the ButtonGroup component to group buttons together like this.

<template>
	<px-space direction="vertical">
		<px-button-group>
			<px-button>Primary</px-button>
			<px-button theme="sakura">Sakura</px-button>
			<px-button color="#E956AE" variant="plain">#E956AE</px-button>
			<px-button loading>Loading</px-button>
		</px-button-group>
		<px-button-group shape="round">
			<px-button>Primary</px-button>
			<px-button theme="sakura">Sakura</px-button>
			<px-button color="#E956AE" variant="plain">#E956AE</px-button>
			<px-button loading>Loading</px-button>
		</px-button-group>
		<px-button-group loading>
			<px-button>Primary</px-button>
			<px-button theme="sakura">Sakura</px-button>
			<px-button color="#E956AE" variant="plain">#E956AE</px-button>
			<px-button disabled>Loading</px-button>
		</px-button-group>
		<px-button-group theme="notice">
			<px-button>First</px-button>
			<px-button>Second</px-button>
			<px-button color="#E956AE">Third</px-button>
			<px-button loading variant="text">Fourth</px-button>
		</px-button-group>
		<px-button-group :border-radius="[20, 16, 20, 16]">
			<px-button>First</px-button>
			<px-button>Second</px-button>
			<px-button>Third</px-button>
			<px-button>Fourth</px-button>
		</px-button-group>
	</px-space>
</template>

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			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. It is typically used to resolve abnormal canvas rendering that occurs when the component's size is affected by its container element.	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}%`