Button
A versatile, customizable element for user actions, supporting themes, sizes, variants, ripple effects, and styling options.
Variants
Colors
Sizes
Radius
Features
- Customizable sizes, colors, and variants
- Supports ripple effect on click
- Easy integration with events such as
onMouseDown - Fully customizable styling and class names
- Supports accessibility attributes
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | — | Content of the button, typically text or an icon. |
| className | string | — | Custom class name for additional styling. |
| ripple | boolean | true | Enables the ripple effect when the button is clicked. |
| color | "base" | "primary" | "secondary" | "success" | "warning" | "danger" | — | Color theme of the button. |
| size | "sm" | "md" | "lg" | "xl" | — | Size of the button. |
| rounded | "sm" | "md" | "lg" | "xl" | "full" | — | Border radius of the button. |
| variant | "solid" | "outline" | "ghost" | "flat" | — | Style variant of the button. |
| onMouseDown | MouseEventHandler<HTMLButtonElement> | — | Callback function to handle mouse down events. |
| ...props | ButtonHTMLAttributesWithoutColor |