Button

🌏 Translated with the assistance of DeepSeek and ChatGPT

A common button, a control to trigger functions.

Button Themes

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

<template>
	<px-space>
		<px-button>Primary</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']
const variantLabels = {
	default: 'Primary',
	plain: 'Plain',
	outline: 'Outline',
	text: 'Text'
}
</script>

Button Shapes

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

<template>
	<px-space>
		<px-button>Default</px-button>
		<px-button shape="round">Round</px-button>
		<px-button shape="circle">C</px-button>
		<px-button 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: 'default' (default), 'small', and 'large'.

<template>
	<px-space>
		<px-button size="small">Small</px-button>
		<px-button>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 variant="outline">
			<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 :border-radius="[20, 16, 20, 16]">
			<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-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	'default' | 'round' | 'circle' | 'square'	True	'default'	Button shape.	0.0.0-beta
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'	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

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	'default' | 'round'	True	'default'	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.0-beta
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

ButtonGroupSlots

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

NumberOrPercentage

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