Button

'use client';

import { Button } from '@/registry/san-francisco/ui/button';

export default function ButtonDemo() {
  return <Button>Button</Button>;
}

'use client';

import { Button } from '@/registry/san-francisco/ui/button';

export default function ButtonDemoVariants() {
  return (
    <div className="flex flex-col flex-wrap items-center gap-6 md:flex-row md:justify-center">
      <Button variant="default">Default</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="destructive">Destructive</Button>
      <Button variant="link">Link</Button>
    </div>
  );
}

'use client';

import { Button } from '@/registry/san-francisco/ui/button';

export default function ButtonDemoSizes() {
  return (
    <div className="flex flex-col flex-wrap items-center gap-6 md:flex-row md:justify-center">
      <Button size="xs">Extra Small</Button>
      <Button size="sm">Small</Button>
      <Button size="default">Default</Button>
      <Button size="lg">Large</Button>
    </div>
  );
}