Button

A versatile and customizable button component for modern web interfaces

By Arghya Das

•December 7, 2024

button.tsx

export default function Button() {
  return (
    <button
      className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg
      transition-all duration-200 
      focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
      shadow-sm hover:shadow-md active:scale-95"
    >
      Click me
    </button>
  );
}

card.tsx

Oops!

Looks like we've hit a dead end. The page you're looking for doesn't exist or may have been moved.

The Button component is a versatile and customizable UI element that follows modern design principles. It supports various styles, sizes, and states to meet different interface needs.

Props

Prop	Type	Default	Description
variant	`string`	`default`	The visual style of the button
size	`string`	`default`	The size of the button
asChild	`boolean`	`false`	When true, the button will be rendered as a child component
disabled	`boolean`	`false`	Whether the button is disabled
className	`string`	`''`	Additional CSS classes to apply to the button

Examples

All available button variants to suit different contexts: