Button

import { Button } from "@camome/core/Button";

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

import { Button } from "@camome/core/Button";

import styles from "./Variant.module.scss";

export default function Variant() {
  return (
    <div className={styles.container}>
      <Button variant="solid">Solid</Button>
      <Button variant="soft">Soft</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
    </div>
  );
}

import { Button } from "@camome/core/Button";

import styles from "./ColorScheme.module.scss";

export default function ColorScheme() {
  return (
    <div className={styles.container}>
      <Button colorScheme="primary">Primary</Button>
      <Button colorScheme="neutral">Neutral</Button>
      <Button colorScheme="info">Info</Button>
      <Button colorScheme="success">Success</Button>
      <Button colorScheme="warn">Warn</Button>
      <Button colorScheme="danger">Danger</Button>
    </div>
  );
}

import { Button } from "@camome/core/Button";
import { Spinner } from "@camome/core/Spinner";

export default function Loading() {
  return (
    <Button disabled startDecorator={<Spinner size="sm" />}>
      Saving...
    </Button>
  );
}

import { Button } from "@camome/core/Button";

import styles from "./Disabled.module.scss";

export default function Disabled() {
  return (
    <div className={styles.container}>
      <Button variant="solid" disabled>
        Solid
      </Button>
      <Button variant="soft" disabled>
        Subtle
      </Button>
      <Button variant="outline" disabled>
        Outline
      </Button>
      <Button variant="ghost" disabled>
        Ghost
      </Button>
    </div>
  );
}

import { Button } from "@camome/core/Button";

import styles from "./Size.module.scss";

export default function Size() {
  return (
    <div className={styles.container}>
      <Button size="sm">Small</Button>
      <Button size="md">Medium</Button>
      <Button size="lg">Large</Button>
    </div>
  );
}

import ArrowPathIcon from "@heroicons/react/24/outline/ArrowPathIcon";
import ChatBubbleLeftEllipsisIcon from "@heroicons/react/24/outline/ChatBubbleLeftEllipsisIcon";
import CloudArrowDownIcon from "@heroicons/react/24/outline/CloudArrowDownIcon";
import HeartIcon from "@heroicons/react/24/outline/HeartIcon";
import PaperAirplaneIcon from "@heroicons/react/24/outline/PaperAirplaneIcon";
import TrashIcon from "@heroicons/react/24/outline/TrashIcon";

import { Button } from "@camome/core/Button";

import styles from "./WithDecorator.module.scss";

export default function WithDecorator() {
  return (
    <div className={styles.container}>
      <Button
        startDecorator={<ArrowPathIcon strokeWidth="2.25" />}
        size="sm"
        variant="outline"
      >
        Auto-sync
      </Button>
      <Button
        endDecorator={<PaperAirplaneIcon strokeWidth="2.25" />}
        size="sm"
        variant="ghost"
      >
        Send
      </Button>

      <Button
        startDecorator={<CloudArrowDownIcon strokeWidth="2.25" />}
        variant="soft"
      >
        Download
      </Button>
      <Button endDecorator={<ChatBubbleLeftEllipsisIcon strokeWidth="2.5" />}>
        Chat with us
      </Button>

      <Button
        startDecorator={<HeartIcon strokeWidth="2.25" />}
        size="lg"
        variant="ghost"
        colorScheme="success"
      >
        Like
      </Button>
      <Button
        endDecorator={<TrashIcon strokeWidth="2" />}
        size="lg"
        colorScheme="danger"
      >
        Remove
      </Button>
    </div>
  );
}