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 { Button } from "@/components/ui/button/button";

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

"use client";

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

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

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

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

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

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