Button
A versatile button component with neumorphic styling, built on top of Base UI.
Installation
$ npx shadcn@latest add "/r/button.json"
Usage
Variants
The button comes in several variants to suit different contexts.
Sizes
Available in three sizes to accommodate different layouts.
Loading State
Use the isLoading prop to show a loading spinner. The button becomes disabled automatically while loading.
Disabled State
Use the disabled prop to disable the button.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "primary" | "secondary" | "success" | "warning" | "error" | "ghost" | "default" | The visual style of the button. |
| size | "sm" | "md" | "lg" | "md" | The size of the button. |
| isLoading | boolean | false | Whether the button is in a loading state. |
| disabled | boolean | false | Whether the button is disabled. |
| children | React.ReactNode | - | The content to be displayed inside the button. |
| className | string | - | Additional CSS classes to apply to the button. |