Button

A versatile button component with multiple variants and sizes.

Usage

import { Button } from '@/components/ui/button';

export function Example() {
  return <Button>Click me</Button>;
}

Variants

Default

<Button variant="default">Default</Button>

Outline

<Button variant="outline">Outline</Button>

Ghost

<Button variant="ghost">Ghost</Button>

Destructive

<Button variant="destructive">Delete</Button>

Link

<Button variant="link">Link</Button>

Sizes

<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>
<Button size="icon">
  <Icon />
</Button>

With Icons

import { ArrowRight } from 'lucide-react';

<Button>
  Continue
  <ArrowRight className="ml-2 h-4 w-4" />
</Button>

Loading State

'use client';

import { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Loader2 } from 'lucide-react';

export function LoadingButton() {
  const [isLoading, setIsLoading] = useState(false);

  return (
    <Button disabled={isLoading} onClick={() => setIsLoading(true)}>
      {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
      {isLoading ? 'Loading...' : 'Submit'}
    </Button>
  );
}

As Link

import Link from 'next/link';

<Button asChild>
  <Link href="/dashboard">Go to Dashboard</Link>
</Button>

Full Width

<Button className="w-full">Full Width Button</Button>

Custom Styles

<Button className="bg-purple-500 hover:bg-purple-600">
  Custom Color
</Button>

Props

Prop	Type	Default	Description
variant	'default' \| 'outline' \| 'ghost' \| 'destructive' \| 'link'	'default'	Button style variant
size	'sm' \| 'default' \| 'lg' \| 'icon'	'default'	Button size
asChild	boolean	false	Render as child component
disabled	boolean	false	Disable the button
className	string	-	Additional CSS classes

Examples

export function SignUpButton() {
  return (
    <Button size="lg" className="font-semibold">
      Get Started Free
      <ArrowRight className="ml-2 h-5 w-5" />
    </Button>
  );
}

Delete Confirmation

export function DeleteButton({ onDelete }) {
  const [isDeleting, setIsDeleting] = useState(false);

  const handleDelete = async () => {
    setIsDeleting(true);
    await onDelete();
    setIsDeleting(false);
  };

  return (
    <Button
      variant="destructive"
      disabled={isDeleting}
      onClick={handleDelete}
    >
      {isDeleting ? 'Deleting...' : 'Delete'}
    </Button>
  );
}

Button Group

export function ButtonGroup() {
  return (
    <div className="flex gap-2">
      <Button variant="outline">Cancel</Button>
      <Button>Save</Button>
    </div>
  );
}

Button

On this page