> ## 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/ar/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.