Button
A versatile and accessible button component with multiple variants, sizes, and states. Ideal for primary actions, secondary options, and loading indicators in forms and interfaces.
Install Dependencies
npx quickcode-ui add ButtonDefault Usage
Default Button
Variants
Outline Variant
Secondary Variant
Ghost Variant
Destructive Variant
Link Variant
Sizes and Loading
Small Size
Large Size
Loading State
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "default" | Visual style of the button, affecting background, border, and text colors. |
size | "default" | "sm" | "lg" | "md" | "icon" | "default" | Controls padding, height, and overall size of the button. |
isLoading | boolean | false | Shows a loading spinner and disables the button during asynchronous actions. |
disabled | boolean | false | Disables the button and applies reduced opacity. |
className | string | undefined | Additional CSS classes for custom styling overrides. |
onClick | () => void | undefined | Optional click handler function. |
type | "button" | "submit" | "reset" | "button" | HTML button type for form submissions. |
children | React.ReactNode | undefined | Button content, such as text or icons. |
Last updated on