Prism Docs

import { Toggle } from '@mylighthouse/prism-react';

export default function ToggleBasic(): React.JSX.Element {
  return (
    <>
      <label className="flex items-center gap-200">
        <Toggle />
        Off
      </label>
      <label className="flex items-center gap-200">
        <Toggle defaultChecked />
        On
      </label>
    </>
  );
}

import { Toggle } from '@mylighthouse/prism-react';

export default function ToggleSizes(): React.JSX.Element {
  return (
    <>
      <label className="flex items-center gap-200">
        <Toggle />
        Default
      </label>
      <label className="flex items-center gap-200">
        <Toggle isSmall />
        Small
      </label>
    </>
  );
}

import { Toggle } from '@mylighthouse/prism-react';

export default function ToggleDisabled(): React.JSX.Element {
  return (
    <>
      <label className="flex items-center gap-200">
        <Toggle disabled />
        Off
      </label>
      <label className="flex items-center gap-200">
        <Toggle defaultChecked disabled />
        On
      </label>
    </>
  );
}