IconButton

import { BellAlertIcon } from "@heroicons/react/24/outline";

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

export default function Default() {
  return (
    <IconButton aria-label="bell">
      <BellAlertIcon />
    </IconButton>
  );
}

import { BellAlertIcon } from "@heroicons/react/24/outline";

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

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

export default function Variant() {
  return (
    <div className={styles.container}>
      <IconButton variant="solid" aria-label="bell">
        <BellAlertIcon />
      </IconButton>
      <IconButton variant="soft" aria-label="bell">
        <BellAlertIcon />
      </IconButton>
      <IconButton variant="outline" aria-label="bell">
        <BellAlertIcon />
      </IconButton>
      <IconButton variant="ghost" aria-label="bell">
        <BellAlertIcon />
      </IconButton>
    </div>
  );
}

import { BellAlertIcon } from "@heroicons/react/24/outline";

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

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

export default function ColorScheme() {
  return (
    <div className={styles.container}>
      <IconButton colorScheme="primary" aria-label="bell">
        <BellAlertIcon />
      </IconButton>
      <IconButton colorScheme="neutral" aria-label="bell">
        <BellAlertIcon />
      </IconButton>
      <IconButton colorScheme="info" aria-label="bell">
        <BellAlertIcon />
      </IconButton>
      <IconButton colorScheme="success" aria-label="bell">
        <BellAlertIcon />
      </IconButton>
      <IconButton colorScheme="warn" aria-label="bell">
        <BellAlertIcon />
      </IconButton>
      <IconButton colorScheme="danger" aria-label="bell">
        <BellAlertIcon />
      </IconButton>
    </div>
  );
}

import { BellAlertIcon } from "@heroicons/react/24/outline";

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

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

export default function Size() {
  return (
    <div className={styles.container}>
      <IconButton size="sm" aria-label="bell">
        <BellAlertIcon />
      </IconButton>
      <IconButton size="md" aria-label="bell">
        <BellAlertIcon />
      </IconButton>
      <IconButton size="lg" aria-label="bell">
        <BellAlertIcon />
      </IconButton>
    </div>
  );
}

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

export default function Loading() {
  return (
    <IconButton disabled aria-label="loading">
      <Spinner size="sm" />
    </IconButton>
  );
}

import { BellAlertIcon } from "@heroicons/react/24/outline";

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

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

export default function Disabled() {
  return (
    <div className={styles.container}>
      <IconButton variant="solid" aria-label="bell" disabled>
        <BellAlertIcon />
      </IconButton>
      <IconButton variant="soft" aria-label="bell" disabled>
        <BellAlertIcon />
      </IconButton>
      <IconButton variant="outline" aria-label="bell" disabled>
        <BellAlertIcon />
      </IconButton>
      <IconButton variant="ghost" aria-label="bell" disabled>
        <BellAlertIcon />
      </IconButton>
    </div>
  );
}