Button

Stable

Hover effects & click sounds work only in client components. In Next.js, add "use client" at the top to enable them.

A button component with multiple variants, sizes, and states for various use cases.

Import

TypeScript React

import { Button } from "laxod";

Buttons come in different variants for different use cases.

Buttons are available in three different sizes.

Add icons to the left or right side of the button text.

Buttons can be in loading or disabled states.

Buttons can also have fancy effects

Make the button take up the full width of its container.

Internal and external links

Prop	Type	Default	Description
children	ReactNode	-	Content to display in the button
variant	"primary" \| "secondary" \| "success" \| "destructive" \| "warning" \| "flat" \| "outline"	"primary"	Visual style of the button
size	"sm" \| "md" \| "lg"	"md"	Size of the button
leftIcon	ReactNode	-	Icon to display on the left
rightIcon	ReactNode	-	Icon to display on the right
loading	boolean	false	Show loading state
disabled	boolean	false	Disable the button
fullWidth	boolean	false	Make button full width
hoverEffect	boolean	-	Enable hover effect on the button
newTab	boolean	false	Open link in a new tab (only if href is provided)
as	ElementType	-	Render the button as a different element or component
className	string	""	Additional classes to style the button
onClick	(e: SyntheticEvent) => void	-	Callback when the button is clicked
href	string	-	Render button as a link
target	AnchorHTMLAttributes["target"]	-	Target for the link (e.g., "_blank")
rel	AnchorHTMLAttributes["rel"]	-	rel attribute for links
type	ButtonHTMLAttributes["type"]	"button"	Button type ("button" \| "submit" \| "reset")
aria-label	string	-	Accessibility label for the button