AnimatedIconCrossfade

import { useState } from 'react';
import { AnimatedIconCrossfade } from 'twenty-ui/components';
import { IconPencil, IconX } from 'twenty-ui/icon';
import { Button } from 'twenty-ui/primitives/input';

export const EditToggle = () => {
  const [isEditing, setIsEditing] = useState(false);

  return (
    <Button
      onClick={() => setIsEditing(!isEditing)}
      startIcon={
        <AnimatedIconCrossfade
          isActive={isEditing}
          ActiveIcon={IconX}
          InactiveIcon={IconPencil}
        />
      }
    >
      {isEditing ? 'Finish editing' : 'Edit record'}
    </Button>
  );
};