Button
A clickable button component with multiple variants and sizes.
Variants
Different visual styles for various use cases
Colors
Various color options
Sizes
Different button sizes for various contexts
With Icons
Buttons with icons for better visual communication
Loading State
Button with loading spinner for async operations
Main Props
| Name | Type | Default | Description |
|---|---|---|---|
color | 'none' | 'slate' | 'gray' | 'zinc' | 'neutral' | 'stone' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | undefined | Color variant of the button |
size | 'xs' | 'sm' | 'md' | 'lg' | 'md' | The size of the button |
variant | 'outlined' | 'contained' | 'ghost' | 'none' | 'contained' | Visual style of the button |
label | string | '' | Label text when children are not provided |
disabled | boolean | false | Whether the button is disabled |
disabledRipple | boolean | false | Disable ripple effect |
loading | boolean | false | Show loading indicator |
loadingPosition | 'left' | 'right' | 'left' | Position of the loading indicator |
iconLeft | ReactElement | - | Icon displayed on the left |
iconRight | ReactElement | - | Icon displayed on the right |
onClick | React.MouseEventHandler<HTMLButtonElement> | - | Click event handler |
shape | 'rounded' | 'circle' | 'square' | 'rounded' | Shape of the button |
shapeLeft | 'rounded' | 'square' | - | Left side shape |
shapeRight | 'rounded' | 'square' | - | Right side shape |
rippleColor | 'dark' | 'light' | 'dark' | Color of the ripple effect |
children | ReactNode | - | The content of the button |
Class Props
| Name | Type | Default | Description |
|---|---|---|---|
classNameWrapperIcon | string | '' | CSS class for the icon wrapper |
classNameLoading | string | '' | CSS class for the loading spinner |
classNameWrapperLoading | string | '' | CSS class for the loading wrapper |
className | string | '' | Additional CSS classes |