> ## 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

> Fundido cruzado entre dos iconos a medida que cambia el estado de la aplicación.

## Resumen

`AnimatedIconCrossfade` realiza una transición cruzada entre el contenido de los nodos `activeIcon` e `inactiveIcon` según `isActive`. No posee la acción ni el estado. Compóngalo dentro de un [Botón](https://docs.twenty.com/es/ui/primitives/input/button.md) con etiqueta.

**Light**

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

**Dark**

[Ejemplo de 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)

## "Uso"

```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>
  );
};
```

Ambos nodos permanecen montados mientras cambia `isActive`, conservando su estado local. Las capas animan la opacidad y la escala, y desactivan las transiciones cuando se reduce el movimiento. Ambas capas son decorativas; mantén el nombre de acción accesible en el control circundante. Para una imagen independiente con etiqueta, establece `role="img"` y `aria-label` en la raíz.

Los atributos nativos, eventos, `className`, `style` y `ref` se aplican a un span en línea, que puede estar dentro de un botón. `render` reemplaza ese destino mediante la composición de Base UI. Las dimensiones de la raíz usan de forma predeterminada el token de tema de icono pequeño. Define explícitamente el tamaño de cada nodo de icono y usa estilos de ancho y alto en la raíz para gráficos más grandes.

Reemplaza los constructores `ActiveIcon` e `InactiveIcon` por los nodos en minúscula `activeIcon` e `inactiveIcon`. Mueve la opción anterior `size` a las dimensiones del nodo y los estilos de la raíz.

## "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.