Toggle

import * as Toggle from '@radix-ui/react-toggle';
import { FontBoldIcon } from '@radix-ui/react-icons';
import './styles.css';

export default () => (
  <Toggle.Root className="Toggle" aria-label="Toggle bold">
    <FontBoldIcon />
  </Toggle.Root>
);

import { useState } from 'react';
import * as Toggle from '@radix-ui/react-toggle';
import { FontItalicIcon } from '@radix-ui/react-icons';
import './styles.css';

export default () => {
  const [pressed, setPressed] = useState(false);

  return (
    <div>
      <Toggle.Root
        className="Toggle"
        aria-label="Toggle italic"
        pressed={pressed}
        onPressedChange={setPressed}
      >
        <FontItalicIcon />
      </Toggle.Root>
      <p>Status: {pressed ? 'Pressed' : 'Not pressed'}</p>
    </div>
  );
};

import * as Toggle from '@radix-ui/react-toggle';
import { UnderlineIcon } from '@radix-ui/react-icons';

export default () => (
  <Toggle.Root aria-label="Toggle underline" disabled>
    <UnderlineIcon />
  </Toggle.Root>
);