Button

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

Examples

primary

secondary

danger

info

discovery

success

caution

warning

soft

solid

outline

ghost

size

pill

variant

uniform

size

gutterSize

iconSize

block

disabled

inert

selected

variant

Default gutters

opticallyAlign="start"

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

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`	`true`	Fully rounded corners
`block`	`boolean`	`false`	Full width
`uniform`	`boolean`	`false`	Square icon button (width equals height)
`disabled`	`boolean`	`false`	Visually and accessibly disabled
`loading`	`boolean`	`false`	Shows loading indicator
`inert`	`boolean`	`false`	Accessibly disabled without visual change
`selected`	`boolean`	`false`	Selected state styling
`opticallyAlign`	`"start" \| "end"`	—	Offset gutter for optical alignment
`gutterSize`	`string`	—	Horizontal padding size
`iconSize`	`string`	—	Size of icons in children