Overview

All six variants, four sizes, loading and disabled states.

Install

This example composes Button — install the primitive, then copy the example below.

bash

npx shadcn@latest add @pixeldosa/button

Code

tsx

"use client";

import { Button } from "@/registry/button/button";

/**
 * Docs preview for Button. Self-contained by contract — no props, no external
 * state — so the docs site can render it without wiring anything up, and so the
 * preview can never drift from the component's real API.
 */
export default function ButtonDemo() {
  return (
    <div className="flex flex-col items-center gap-6">
      <div className="flex flex-wrap items-center justify-center gap-3">
        <Button>Order dosa</Button>
        <Button variant="secondary">Secondary</Button>
        <Button variant="outline">Outline</Button>
        <Button variant="ghost">Ghost</Button>
        <Button variant="destructive">Destructive</Button>
        <Button variant="link">Link</Button>
      </div>
      <div className="flex flex-wrap items-center justify-center gap-3">
        <Button size="sm">Small</Button>
        <Button size="default">Default</Button>
        <Button size="lg">Large</Button>
        <Button size="icon" aria-label="Add item">
          <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
            <path
              d="M12 5v14M5 12h14"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
            />
          </svg>
        </Button>
        <Button loading>Saving</Button>
        <Button disabled>Disabled</Button>
      </div>
    </div>
  );
}