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

> Плавное переключение между двумя значками при изменении состояния приложения.

## Обзор

`AnimatedIconCrossfade` выполняет плавное перекрестное затухание между содержимым узлов `activeIcon` и `inactiveIcon` в соответствии с `isActive`. Он не управляет действием или состоянием. Размещайте его внутри подписанной [кнопки](https://docs.twenty.com/ru/ui/primitives/input/button.md).

**Light**

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

**Dark**

[Пример 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)

## Использование

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

Оба узла остаются смонтированными при изменении `isActive`, сохраняя своё локальное состояние. Слои анимируют непрозрачность и масштаб, а также отключают переходы при уменьшенном движении. Оба слоя являются декоративными; сохраняйте доступное имя действия на окружающем элементе управления. Для отдельного изображения с подписью задайте `role="img"` и `aria-label` в корневом элементе.

Нативные атрибуты, события, `className`, `style` и `ref` применяются к встроенному элементу span, который может находиться внутри кнопки. `render` заменяет этот целевой элемент посредством композиции Base UI. По умолчанию размеры корневого элемента задаются токеном темы для маленьких значков. Явно задавайте размер каждого узла значка и используйте стили ширины и высоты корневого элемента для более крупной графики.

Замените конструкторы `ActiveIcon` и `InactiveIcon` узлами `activeIcon` и `inactiveIcon` в нижнем регистре. Перенесите прежний параметр `size` в размеры узла и стили корневого элемента.

## Свойства

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