Button

Component

A versatile button component with multiple variants, sizes, and states.

Basic Usage

The default button with primary styling

Sizes

Different button sizes for various use cases

Interactive Playground

Try different button configurations live

import { Button } from './Button'

export default function App() {
  return (
    <div className="p-8 space-y-4">
      <h2 className="text-2xl font-bold mb-4">Button Examples</h2>
      
      <div className="space-y-4">
        <div className="flex gap-2">
          <Button>Primary</Button>
          <Button variant="secondary">Secondary</Button>
          <Button variant="outline">Outline</Button>
        </div>
        
        <div className="flex gap-2">
          <Button size="sm">Small</Button>
          <Button size="default">Default</Button>
          <Button size="lg">Large</Button>
        </div>
        
        <div className="flex gap-2">
          <Button disabled>Disabled</Button>
          <Button variant="destructive">Delete</Button>
        </div>
      </div>
    </div>
  )
}

Open Sandbox