Toggle

import * as stylex from '@stylexjs/stylex';
import { Bold } from 'lucide-react';

import { Toggle } from '@/components/ui/toggle';
import { icon } from '@/lib/stylex-utils';

export default function ToggleDemo() {
  return (
    <Toggle aria-label="Toggle bold">
      <Bold {...stylex.props(icon.md)} />
    </Toggle>
  );
}

import { Toggle } from '@/components/ui/toggle';

export default function ToggleOutline() {
  return (
    <Toggle variant="outline" aria-label="Toggle italic">
      Italic
    </Toggle>
  );
}

import * as stylex from '@stylexjs/stylex';
import { Italic } from 'lucide-react';

import { Toggle } from '@/components/ui/toggle';
import { icon } from '@/lib/stylex-utils';

export default function ToggleText() {
  return (
    <Toggle aria-label="Toggle italic">
      <Italic {...stylex.props(icon.md)} />
      Italic
    </Toggle>
  );
}

import * as stylex from '@stylexjs/stylex';

import { Toggle } from '@/components/ui/toggle';
import { space } from '@/lib/constants.stylex';

export default function ToggleSizes() {
  return (
    <div {...stylex.props(styles.row)}>
      <Toggle size="sm" aria-label="Toggle bold">
        Small
      </Toggle>
      <Toggle size="md" aria-label="Toggle bold">
        Medium
      </Toggle>
      <Toggle size="lg" aria-label="Toggle bold">
        Large
      </Toggle>
    </div>
  );
}

const styles = stylex.create({
  row: {
    alignItems: 'center',
    display: 'flex',
    gap: space.s2,
  },
});

import { Toggle } from '@/components/ui/toggle';

export default function ToggleDisabled() {
  return (
    <Toggle disabled aria-label="Toggle bold">
      Bold
    </Toggle>
  );
}