Button

This is a default button component.

Installation

1. Dependencies

npm install clsx tailwind-merge

2. Paste inside @/lib/utils.ts

import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: Parameters<typeof clsx>) {
  return twMerge(clsx(...inputs));
}

3. Copy Button Code

Copy Button Code

Button Props

Name	Type	Required	Default	Description
variant	"default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| "link"	No	"default"	The variant of the button, which determines its style.
size	"default" \| "sm" \| "lg" \| "icon"	No	"default"	The size of the button, which determines its dimensions.
children	React.ReactNode	Yes	undefined	The content to be displayed inside the button.
className	string	No	""	Additional class names for custom styling.
onClick	() => void	No	undefined	Callback function triggered when the button is clicked.
disabled	boolean	No	false	Disables the button, preventing user interaction.
type	"button" \| "submit" \| "reset"	No	"button"	Specifies the type of the button.