Button

A versatile button component supporting multiple variants, sizes, and states for user interactions.

npx chilli@latest add button

Prop	Type	Default	Description
`variant`	`"brand" \| "primary" \| "secondary" \| "ghost" \| "danger" \| "danger-soft"`	`"primary"`	The visual style variant of the button.
`size`	`"xsm" \| "sm" \| "md" \| "lg"`	`"md"`	The size of the button.
`glass`	`boolean`	`false`	Enables glass morphism style with backdrop blur and semi-transparent background.
`loading`	`boolean`	`false`	Shows a spinning loader icon and disables the button.
`leftIcon`	`LucideIcon`	`—`	Icon component displayed before the button text.
`rightIcon`	`LucideIcon`	`—`	Icon component displayed after the button text.
`disabled`	`boolean`	`false`	Whether the button is disabled.
`asChild`	`boolean`	`false`	Renders as the child element instead of a button.
`children`	`ReactNode`	`—`	The content of the button.
`className`	`string`	`—`	Additional CSS classes to merge.

Prop	Type	Default	Description
`provider`	`"apple" \| "google" \| "facebook" \| "apple-pay"`	`—`	Required. The social provider.
`variant`	`"primary" \| "secondary"`	`auto (based on provider)`	Visual style override.
`disabled`	`boolean`	`false`	Disables the button.
`className`	`string`	`—`	Additional CSS classes.