Button

"use client";

import { Button } from "@/registry/base/ui/button";
import { Spinner } from "@/registry/base/ui/spinner";

export default function Button01() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Button disabled>
        <Spinner />
        Saving changes
      </Button>
      <Button>Save changes</Button>
    </div>
  );
}

"use client";

import { ArrowRight, Download, Mail } from "lucide-react";

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

export default function Button02() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Button>
        <Mail aria-hidden="true" />
        Email us
      </Button>
      <Button variant="outline">
        Continue
        <ArrowRight aria-hidden="true" />
      </Button>
      <Button variant="secondary">
        <Download aria-hidden="true" />
        Download report
      </Button>
    </div>
  );
}

"use client";

import { ArrowRight } from "lucide-react";

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

export default function Button03() {
  return (
    <div className="flex flex-col items-start gap-4 text-left">
      <div>
        <h3 className="text-lg font-semibold">Ready to get started?</h3>
        <p className="mt-1 text-sm text-muted-foreground">
          Set up your workspace in minutes, no credit card required.
        </p>
      </div>
      <div className="flex flex-wrap items-center gap-2">
        <Button size="lg">Get started</Button>
        <Button variant="ghost" size="lg">
          Learn more
          <ArrowRight aria-hidden="true" />
        </Button>
      </div>
    </div>
  );
}

"use client";

import { Copy, Pencil, Trash2 } from "lucide-react";

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

export default function Button04() {
  return (
    <div className="flex items-center gap-1 rounded-lg border p-1">
      <Button variant="outline" size="icon" aria-label="Copy">
        <Copy aria-hidden="true" />
      </Button>
      <Button variant="outline" size="icon" aria-label="Edit">
        <Pencil aria-hidden="true" />
      </Button>
      <Button variant="outline" size="icon" aria-label="Delete">
        <Trash2 aria-hidden="true" />
      </Button>
    </div>
  );
}