> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# AnimatedIconCrossfade

> Dissolvenza incrociata tra due icone quando cambia lo stato dell'applicazione.

## Panoramica

`AnimatedIconCrossfade` esegue una dissolvenza incrociata tra il contenuto dei nodi `activeIcon` e `inactiveIcon` in base a `isActive`. Non gestisce l'azione né lo stato. Componilo all'interno di un [Pulsante](https://docs.twenty.com/it/ui/primitives/input/button.md) con etichetta.

**Light**

[Esempio di AnimatedIconCrossfade (light)](https://storybook.twenty.com/iframe.html?id=ui-components-layout-animatediconcrossfade--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Esempio di AnimatedIconCrossfade (dark)](https://storybook.twenty.com/iframe.html?id=ui-components-layout-animatediconcrossfade--display\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-components-layout-animatediconcrossfade--display)

## Utilizzo

```tsx theme={null}
import { useState } from 'react';
import { AnimatedIconCrossfade } from 'twenty-ui/components/layout';
import { IconPencil, IconX } from 'twenty-ui/icon';
import { Button } from 'twenty-ui/primitives/input';

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

  return (
    <Button
      size="sm"
      aria-expanded={isEditing}
      onClick={() => setIsEditing(!isEditing)}
      startIcon={
        <AnimatedIconCrossfade
          isActive={isEditing}
          activeIcon={<IconX size={14} />}
          inactiveIcon={<IconPencil size={14} />}
        />
      }
    >
      Edit actions
    </Button>
  );
};
```

Entrambi i nodi rimangono montati quando `isActive` cambia, preservando il loro stato locale. I livelli animano l'opacità e la scala e disabilitano le transizioni per il movimento ridotto. Entrambi i livelli sono decorativi; mantieni il nome accessibile dell'azione nel controllo circostante. Per un'immagine autonoma con etichetta, imposta `role="img"` e `aria-label` sull'elemento radice.

Gli attributi nativi, gli eventi, `className`, `style` e `ref` si applicano a uno span inline, che può trovarsi all'interno di un pulsante. `render` sostituisce tale destinazione tramite la composizione di Base UI. Le dimensioni dell'elemento radice usano per impostazione predefinita il token del tema dell'icona piccola. Imposta esplicitamente le dimensioni di ciascun nodo icona e usa gli stili di larghezza e altezza dell'elemento radice per grafiche più grandi.

Sostituisci i costruttori `ActiveIcon` e `InactiveIcon` con i nodi in minuscolo `activeIcon` e `inactiveIcon`. Sposta la precedente opzione `size` nelle dimensioni del nodo e negli stili dell'elemento radice.

## Props

**activeIcon** `ReactNode` *required*

Decorative node content for the active state.

**className** `string`

CSS class applied to the inline span root.

**inactiveIcon** `ReactNode` *required*

Decorative node content for the inactive state.

**isActive** `boolean` *required*

Shows activeIcon when true and inactiveIcon otherwise.

**render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, \{\}\>`

Replaces the span root while preserving both transition layers.

**style** `CSSProperties`

Inline styles applied to the root, including width and height.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.