Button

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

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

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

export default function ButtonSecondary() {
  return <Button variant="secondary">Secondary</Button>;
}

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

export default function ButtonDestructive() {
  return <Button variant="destructive">Destructive</Button>;
}

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

export default function ButtonOutline() {
  return <Button variant="outline">Outline</Button>;
}

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

export default function ButtonGhost() {
  return <Button variant="ghost">Ghost</Button>;
}

import { Settings } from "lucide-react";
import { Button } from "@/components/ui/button/button";

export default function ButtonIcon() {
  return (
    <Button size="icon" variant="outline">
      <Settings size={16} />
    </Button>
  );
}

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

export default function ButtonDisabled() {
  return <Button disabled>Disabled</Button>;
}

"use client";

import { Button, Spinner } from "@/components/ui/button/button";
import styles from "./button-loading.module.css";

export default function ButtonLoading() {
  return (
    <div className={styles.container}>
      <Button disabled>
        <Spinner />
        Always Loading
      </Button>
    </div>
  );
}

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

export default function ButtonExternalLink() {
  return (
    <Button render={<a href="#" />} style={{ borderRadius: "30px" }} variant="outline">
      View External
      <ArrowPointer pointExternal />
    </Button>
  );
}

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

export default function ButtonWithArrow() {
  return (
    <Button>
      With Arrow
      <ArrowPointer />
    </Button>
  );
}