UI

Button

Displays a button or a component that looks like a button.

Button Component

'use client'

import { Button } from '../ui/button'

const ButtonDemo = () => {
  const handleClick = () => {
    alert('Button clicked!');
  };

  return (
    <div className="flex flex-col items-center">
      <h2 className="text-2xl font-bold mb-6">Button Component</h2>
      <div className="grid grid-cols-1 gap-4 md:grid-cols-3 md:gap-6">
        <Button onClick={handleClick} variant="default">
          Click me
        </Button>
      </div>
    </div>
  );
};

export default ButtonDemo;

Installation

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Anatomy

Import all parts and piece them together.

import { buttonVariants } from "@/components/ui/button"

<Button className={buttonVariants({ variant: "outline" })}>Click here</Button>

Props

Variant

<Button>default</Button>

Size

<Button>default button</Button>