Features

• Multiple visual variants (default, destructive, outline, secondary, ghost, link)
• Size options (default, sm, lg, icon)
• Loading and disabled states
• Fully accessible with ARIA attributes
• Keyboard navigation support

Usage

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

export default function Example() {
  return (
    <div className="flex gap-4">
      <Button>Default</Button>
      <Button variant="destructive">Destructive</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="link">Link</Button>
    </div>
  );
}
import { Button } from "@/components/ui/button";

export default function Example() {
  return (
    <div className="flex gap-4">
      <Button>Default</Button>
      <Button variant="destructive">Destructive</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="link">Link</Button>
    </div>
  );
}

Variants

Default

The primary button style for main actions.

<Button>Click me</Button>
<Button>Click me</Button>

Destructive

For dangerous or irreversible actions.

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

Outline

A subtle button style with just an outline.

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

Sizes

Control the button size with the size prop.

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

As Child

Use asChild to render the button as a different element.

import Link from "next/link";

<Button asChild>
  <Link href="/about">About</Link>
</Button>
import Link from "next/link";

<Button asChild>
  <Link href="/about">About</Link>
</Button>

Accessibility

The Button component is built with accessibility in mind:

• Proper ARIA attributes
• Keyboard navigation (Enter and Space)
• Focus indicators
• Disabled state handling