Toggle

import { Toggle } from "@uj-vilag/dap-components";
import { RiHome2Fill } from "@remixicon/react";

export default function Toggles() {
  return (
    <div>
      <Toggle>Toggle me!</Toggle>
      <Toggle defaultPressed size="icon_medium">
        <RiHome2Fill />
      </Toggle>
    </div>
  );
}

import { Toggle } from "@uj-vilag/dap-components";
import { RiHome2Fill } from "@remixicon/react";

export default function Sizes() {
  return (
    <div>
      <div>
        <Toggle size="large">Large</Toggle>
        <Toggle size="medium">Medium</Toggle>
        <Toggle size="small">Small</Toggle>
        <Toggle size="xSmall">xSmall</Toggle>
      </div>
      <div>
        <Toggle size="icon_large">
          <RiHome2Fill />
        </Toggle>
        <Toggle size="icon_medium">
          <RiHome2Fill />
        </Toggle>
        <Toggle size="icon_small">
          <RiHome2Fill />
        </Toggle>
        <Toggle size="icon_xSmall">
          <RiHome2Fill />
        </Toggle>
      </div>
    </div>
  );
}

import { Toggle } from "@uj-vilag/dap-components";
import { RiHome2Fill } from "@remixicon/react";

export default function Icons() {
  return (
    <div className="flex flex-wrap gap-3">
      <Toggle>
        <RiHome2Fill />
        Home
      </Toggle>
      <Toggle defaultPressed>
        Home
        <RiHome2Fill />
      </Toggle>
      <Toggle>
        <RiArrowLeftLine />
        Arrows
        <RiArrowRightLine />
      </Toggle>
    </div>
  );
}

import { Toggle } from "@uj-vilag/dap-components";
import { RiHome2Fill } from "@remixicon/react";

export default function Loading() {
  return (
    <div>
      <div>
        <Toggle loading size="large">
          Large
        </Toggle>
        <Toggle loading size="medium">
          Medium
        </Toggle>
        <Toggle loading size="small">
          Small
        </Toggle>
        <Toggle loading size="xSmall">
          xSmall
        </Toggle>
      </div>
      <div>
        <Toggle loading size="icon_large">
          <RiHome2Fill />
        </Toggle>
        <Toggle loading size="icon_medium">
          <RiHome2Fill />
        </Toggle>
        <Toggle loading size="icon_small">
          <RiHome2Fill />
        </Toggle>
        <Toggle loading size="icon_xSmall">
          <RiHome2Fill />
        </Toggle>
      </div>
    </div>
  );
}

import { Toggle } from "@uj-vilag/dap-components";
import { RiHome2Fill } from "@remixicon/react";

export default function Disabled() {
  return (
    <div>
      <Toggle disabled>Toggle me!</Toggle>
      <Toggle defaultPressed size="icon_medium" disabled>
        <RiHome2Fill />
      </Toggle>
    </div>
  );
}