Button
A clickable button component with multiple variants and sizes.
1npx purekit add button
1import Button from "@/components/purekit-ui/button/button"
Variants
Different visual styles for various use cases
Colors
Various color options from Tailwind config
Custom Colors
Use color='none' to disable default color styles, then apply your own via className
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
Custom Style
Customize buttons with your own Tailwind classes using variant='none'
Button Group
Group buttons together using shapeLeft and shapeRight props
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 |