Toggle

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

export default function ToggleDemo() {
  return (
    <Toggle aria-label="Toggle bold">
      <svg
        width="16"
        height="16"
        viewBox={`0 0 16 16`}
        fill="none"
        stroke="currentColor"
        strokeWidth="1.8"
        strokeLinecap="round"
        strokeLinejoin="round"
        aria-hidden
      >
        <path d={`M4 2.5h5a2.75 2.75 0 0 1 0 5.5H4zM4 8h5.75a2.75 2.75 0 0 1 0 5.5H4z`} />
      </svg>
    </Toggle>
  );
}

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

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

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

export default function ToggleText() {
  return (
    <Toggle aria-label="Toggle italic">
      <svg
        width="16"
        height="16"
        viewBox={`0 0 16 16`}
        fill="none"
        stroke="currentColor"
        strokeWidth="1.8"
        strokeLinecap="round"
        strokeLinejoin="round"
        aria-hidden
      >
        <path d={`M6.5 2.5h6M3.5 13.5h6M9.5 2.5l-3 11`} />
      </svg>
      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>
  );
}