Button with four variants (solid, soft, outline, ghost), eight semantic colors, icon slots, loading, and block layout.

import { Button } from "@plexui/vue/components/Button";

Examples

size

variant

color

pill

variant

uniform

size

gutterSize

iconSize

color

block

disabled

inert

selected

variant

Button shares the unified 9-step size scale with Input, Select, SelectControl, and SegmentedControl.

API

Props mirror the React Button. In Vue, pass classes with class (React's className) and listen with @click.

Prop	Type	Default	Description
`color`	`"primary" \| "secondary" \| "danger" \| "success" \| "info" \| "discovery" \| "caution" \| "warning"`	`"primary"`	Visual color scheme
`variant`	`"solid" \| "soft" \| "outline" \| "ghost"`	`"solid"`	Button style variant
`size`	`"3xs" \| "2xs" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "3xl"`	`"md"`	Control height and default gutter/icon size
`pill`	`boolean`	`false`	Fully rounded corners
`block`	`boolean`	`false`	Full width
`uniform`	`boolean`	`false`	Square icon button (width equals height)
`disabled`	`boolean`	`false`	Visually and accessibly disabled; click is not emitted
`disabled-tone`	`"relaxed"`	—	Default cursor instead of not-allowed while disabled
`loading`	`boolean`	`false`	Shows loading indicator
`inert`	`boolean`	`loading`	Accessibly disabled without visual change
`selected`	`boolean`	`false`	Selected state styling
`optically-align`	`"start" \| "end"`	—	Offset gutter for optical alignment
`gutter-size`	`"3xs" \| "2xs" \| "xs" \| "sm" \| "md" \| "lg" \| "xl"`	—	Horizontal padding size; defaults from size
`icon-size`	`"sm" \| "md" \| "lg" \| "xl" \| "2xl"`	—	Size of icons in the slot; defaults from size
`type`	`"button" \| "submit" \| "reset"`	`"button"`	Native button type
`@click`	`(event: MouseEvent) => void`	—	Emitted on click, unless disabled

Button reads these component tokens. Override them at any scope to restyle it: