Elevated interactive elements that provide tactile feedback via scale and shadow compression on click.
Physics: Buttons use convex shadows (drop shadows) to create depth. On hover, shadow spreads and lifts. On active/press, shadow compresses and element translates down, simulating physical button press.
sm (36px), md (48px - default), lg (56px)Use the iconOnly prop for square buttons that contain only an icon. This applies proper padding for a balanced appearance.
Group related buttons together with consistent spacing or attached styling. ButtonGroup can propagate size and variant to child buttons via context.
A split button combines a primary action with a dropdown menu for secondary actions. The main button handles the default action while the dropdown provides alternatives.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'primary' | 'secondary' | 'ghost' | 'primary' | Visual style variant |
size | 'sm' | 'md' | 'lg' | 'md' | Button size (36px, 48px, 56px) |
disabled | boolean | false | Disable the button |
isLoading | boolean | false | Show loading spinner |
iconOnly | boolean | false | Square button for icon-only content |
leftIcon | string | ReactNode | - | Icon before button text |
rightIcon | string | ReactNode | - | Icon after button text |
error | string | - | Error message (shows error-disabled state) |
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | 'horizontal' | Layout direction |
attached | boolean | false | Connect buttons visually (no gaps, merged borders) |
size | 'sm' | 'md' | 'lg' | - | Size applied to all child buttons |
variant | ButtonVariant | - | Variant applied to all child buttons |
fullWidth | boolean | false | Buttons share available space equally |
gap | 'none' | 'sm' | 'md' | 'lg' | 'md' | Gap between buttons (when not attached) |
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | required | Main button content |
onClick | () => void | - | Main button click handler |
menuItems | SplitButtonMenuItem[] | required | Dropdown menu items |
variant | 'primary' | 'secondary' | 'ghost' | 'primary' | Button style variant |
size | 'sm' | 'md' | 'lg' | 'md' | Button size |
disabled | boolean | false | Disable both buttons |
leftIcon | string | ReactNode | - | Icon for main button |
dropdownIcon | string | ReactNode | 'chevron-down' | Icon for dropdown trigger |
| Property | Type | Description |
|---|---|---|
label | ReactNode | Menu item text |
onClick | () => void | Click handler |
icon | string | ReactNode | Optional icon |
disabled | boolean | Disabled state |
divider | boolean | Show divider before this item |