Button
Button with four variants (solid, soft, outline, ghost), eight semantic colors, icon slots, loading, and block layout.
import { Button } from "@plexui/ui/components/Button";Examples
Overview
Colors & variants
Sizing & roundness
size
variant
color
Icons
variant
size
gutterSize
iconSize
color
Block
Disabled
Inert
Loading
Selected
variant
Optical alignment
Default gutters
opticallyAlign="start"
Button shares the unified 9-step size scale with Input, Select, SelectControl, and SegmentedControl.
API
| 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; onClick is not called |
disabledTone | "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 |
opticallyAlign | "start" | "end" | — | Offset gutter for optical alignment |
gutterSize | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | — | Horizontal padding size; defaults from size |
iconSize | "sm" | "md" | "lg" | "xl" | "2xl" | — | Size of icons in children; defaults from size |
type | "button" | "submit" | "reset" | "button" | Native button type |
onClick | (event: MouseEvent) => void | — | Called on click, unless disabled |
Styling
Button reads these component tokens. Override them at any scope to restyle it:
--button-font-weight: font weight (defaultvar(--font-weight-medium))--button-gap-lg: gap lg (default6px)--button-gap-md: gap md (default4px)--button-gap-sm: gap sm (default3px)