Interactive

beginner

click

form

action

Usage

Interact with the component above to see it in action. The component is fully functional and demonstrates real-world usage patterns.

Code

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

export function ButtonDemo() {
  return (
    <div className="space-y-4">
      <div className="flex flex-wrap gap-2">
        <Button>Default</Button>
        <Button variant="secondary">Secondary</Button>
        <Button variant="outline">Outline</Button>
        <Button variant="destructive">Destructive</Button>
      </div>
      <div className="flex flex-wrap gap-2">
        <Button size="sm">Small</Button>
        <Button>Default</Button>
        <Button size="lg">Large</Button>
      </div>
    </div>
  );
}