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

> Tranziție graduală între două pictograme pe măsură ce se schimbă starea aplicației.

## Prezentare generală

`AnimatedIconCrossfade` realizează o tranziție încrucișată între conținutul nodurilor `activeIcon` și `inactiveIcon` în funcție de `isActive`. Nu gestionează acțiunea sau starea. Compune-l în interiorul unui [Buton](https://docs.twenty.com/ro/ui/primitives/input/button.md) etichetat.

**Light**

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

**Dark**

[Exemplu 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)

## Utilizare

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

Ambele noduri rămân montate pe măsură ce `isActive` se modifică, păstrându-și starea locală. Straturile animează opacitatea și scalarea și dezactivează tranzițiile pentru mișcare redusă. Ambele straturi sunt decorative; păstrați numele accesibil al acțiunii pe controlul înconjurător. Pentru o imagine independentă etichetată, setați `role="img"` și `aria-label` pe rădăcină.

Atributele native, evenimentele, `className`, `style` și `ref` vizează un span inline, care poate fi plasat într-un buton. `render` înlocuiește acea țintă prin compoziția Base UI. Dimensiunile rădăcinii folosesc implicit tokenul de temă pentru pictograme mici. Dimensionați explicit fiecare nod de pictogramă și utilizați stilurile de lățime și înălțime ale rădăcinii pentru ilustrații mai mari.

Înlocuiți constructorii `ActiveIcon` și `InactiveIcon` cu nodurile `activeIcon` și `inactiveIcon` scrise cu litere mici. Mutați fosta opțiune `size` în dimensiunile nodului și în stilurile rădăcinii.

## Proprietăți

**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.