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

# الأزرار

<Frame>
  <img src="https://mintcdn.com/twenty/GMeQVDsw5ST_LXpE/images/user-guide/views/filter.png?fit=max&auto=format&n=GMeQVDsw5ST_LXpE&q=85&s=457ca3d2bad4bdf406ab6b01f22e0bf2" alt="رأس الصفحة" width="1440" height="680" data-path="images/user-guide/views/filter.png" />
</Frame>

قائمة الأزرار ومجموعات الأزرار المستخدمة في التطبيق.

## زر

<Tabs>
  <Tab title="الاستخدام">
    ```jsx theme={null}
    import { Button } from "@/ui/input/button/components/Button";

    export const MyComponent = () => {
      return (
        <Button
          className
          Icon={null}
          title="Title"
          fullWidth={false}
          variant="primary"
          size="medium"
          position="standalone"
          accent="default"
          soon={false}
          disabled={false}
          focus={true}
          onClick={() => console.log("click")}
        />
      );
    };
    ```
  </Tab>

  <Tab title="خصائص">
    | خصائص     | النوع                 | الوصف                                                                              |
    | --------- | --------------------- | ---------------------------------------------------------------------------------- |
    | className | string                | اسم فئة اختياري لتنسيقات إضافية                                                    |
    | أيقونة    | `React.ComponentType` | مكون رمز اختياري يُعرض داخل الزر                                                   |
    | العنوان   | string                | محتوى نص الزر                                                                      |
    | عرض كامل  | قيمة منطقية           | يُحدد إذا كان الزر يجب أن يمتد ليغطي العرض الكامل للحاوية الخاصة به                |
    | التنوع    | string                | النمط المرئي للزر. تشمل الخيارات `primary`، `secondary`، و`tertiary`.              |
    | الحجم     | string                | حجم الزر. يوجد خياران: `صغير` و `متوسط`                                            |
    | الموقع    | string                | موقع الزر بالنسبة لأخوته. تشمل الخيارات: `standalone`، `left`، `right`، و`middle`. |
    | accent    | string                | موقع الزر بالنسبة لأخوته. تشمل الخيارات: `default`، `blue`، `danger`               |
    | قريباً    | قيمة منطقية           | يشير إلى ما إذا كان الزر معلمًا "قريبًا" (مثل الميزات القادمة)                     |
    | معطل      | قيمة منطقية           | يحدد إذا كان الزر معطل أم لا                                                       |
    | تركيز     | قيمة منطقية           | يحدد إذا كان الزر في وضع التركيز                                                   |
    | عند النقر | وظيفة                 | وظيفة رد فعل تنطلق عند نقر المستخدم على الزر                                       |
  </Tab>
</Tabs>

## مجموعة الأزرار

<Tabs>
  <Tab title="استخدام">
    ```jsx theme={null}
    import { Button } from "@/ui/input/button/components/Button";
    import { ButtonGroup } from "@/ui/input/button/components/ButtonGroup";

    export const MyComponent = () => {
      return (
        <ButtonGroup variant="primary" size="large" accent="blue" className>
          <Button
            className
            Icon={null}
            title="Button 1"
            fullWidth={false}
            variant="primary"
            size="medium"
            position="standalone"
            accent="blue"
            soon={false}
            disabled={false}
            focus={false}
            onClick={() => console.log("click")}
          />
          <Button
            className
            Icon={null}
            title="Button 2"
            fullWidth={false}
            variant="secondary"
            size="medium"
            position="left"
            accent="blue"
            soon={false}
            disabled={false}
            focus={false}
            onClick={() => console.log("click")}
          />
          <Button
            className
            Icon={null}
            title="Button 3"
            fullWidth={false}
            variant="tertiary"
            size="medium"
            position="right"
            accent="blue"
            soon={false}
            disabled={false}
            focus={false}
            onClick={() => console.log("click")}
          />
        </ButtonGroup>
      );
    };

    ```
  </Tab>

  <Tab title="الخصائص">
    | الخصائص   | النوع     | الوصف                                                                                  |
    | --------- | --------- | -------------------------------------------------------------------------------------- |
    | التنوع    | string    | النمط المرئي للأزرار داخل المجموعة. تشمل الخيارات `primary`، `secondary`، و`tertiary`. |
    | الحجم     | string    | حجم الأزرار داخل المجموعة. يوجد خياران: `medium` و`small`.                             |
    | accent    | نص        | لون تمييز الأزرار داخل المجموعة. تشمل الخيارات `default`، `blue` و`danger`.            |
    | className | string    | اسم فئة اختياري لتنسيقات إضافية                                                        |
    | الأبناء   | ReactNode | مجموعة من عناصر React تمثل الأزرار الفردية داخل المجموعة                               |
  </Tab>
</Tabs>

## زر عائم

<Tabs>
  <Tab title="الاستخدام">
    ```jsx theme={null}
    import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
    import { IconSearch } from "@tabler/icons-react";

    export const MyComponent = () => {
      return (
        <FloatingButton
          className
          Icon={IconSearch}
          title="Title"
          size="medium"
          position="standalone"
          applyShadow={true}
          applyBlur={true}
          disabled={false}
          focus={true}
        />
      );
    };
    ```
  </Tab>

  <Tab title="الخصائص">
    | الخصائص      | النوع                 | الوصف                                                                             |
    | ------------ | --------------------- | --------------------------------------------------------------------------------- |
    | className    | string                | اسم اختياري لتنسيقات إضافية                                                       |
    | أيقونة       | `React.ComponentType` | مكون أيقونة اختياري يظهر داخل الزر                                                |
    | العنوان      | string                | محتوى نص الزر                                                                     |
    | الحجم        | string                | حجم الزر. يوجد خياران: `صغير` و `متوسط`                                           |
    | الموقع       | string                | موقع الزر بالنسبة لأخوته. تشمل الخيارات: `standalone`، `left`، `middle`، `right`. |
    | تطبيق الظل   | قيمة منطقية           | يحدد إذا ما سيتم تطبيق الظلال على الزر                                            |
    | تطبيق الضباب | قيمة منطقية           | يحدد ما إذا كان ينبغي تطبيق تأثير الضباب على الزر                                 |
    | معطل         | قيمة منطقية           | يحدد ما إذا كان الزر معطل                                                         |
    | تركيز        | قيمة منطقية           | يحدد إذا كان الزر في وضع التركيز                                                  |
  </Tab>
</Tabs>

## مجموعة الأزرار العائمة

<Tabs>
  <Tab title="الاستخدام">
    ```jsx theme={null}
    import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
    import { FloatingButtonGroup } from "@/ui/input/button/components/FloatingButtonGroup";
    import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";

    export const MyComponent = () => {
      return (
        <FloatingButtonGroup size="small">
          <FloatingButton
            className
            Icon={IconClipboardText}
            title
            size="small"
            position="standalone"
            applyShadow={true}
            applyBlur={true}
            disabled={false}
            focus={true}
          />
          <FloatingButton
            className
            Icon={IconCheckbox}
            title
            size="small"
            position="standalone"
            applyShadow={true}
            applyBlur={true}
            disabled={false}
          />
        </FloatingButtonGroup>
      );
    };
    ```
  </Tab>

  <Tab title="خصائص">
    | خصائص   | النوع     | الوصف                                                    | الإعداد الافتراضي |
    | ------- | --------- | -------------------------------------------------------- | ----------------- |
    | الحجم   | string    | حجم الزر. يوجد خياران: `صغير` و `متوسط`                  | صغير              |
    | الأبناء | ReactNode | مجموعة من عناصر React تمثل الأزرار الفردية داخل المجموعة |                   |
  </Tab>
</Tabs>

## زر رمز عائم

<Tabs>
  <Tab title="الاستخدام">
    ```jsx theme={null}
    import { FloatingIconButton } from "@/ui/input/button/components/FloatingIconButton";
    import { IconSearch } from "@tabler/icons-react";

    export const MyComponent = () => {
      return (
        <FloatingIconButton
          className
          Icon={IconSearch}
          size="small"
          position="standalone"
          applyShadow={true}
          applyBlur={true}
          disabled={false}
          focus={false}
          onClick={() => console.log("click")}
          isActive={true}
        />
      );
    };
    ```
  </Tab>

  <Tab title="الخصائص">
    | الخصائص      | النوع                 | الوصف                                                                              |
    | ------------ | --------------------- | ---------------------------------------------------------------------------------- |
    | className    | نص                    | اسم اختياري لتنسيقات إضافية                                                        |
    | أيقونة       | `React.ComponentType` | مكون أيقونة اختياري يظهر داخل الزر                                                 |
    | الحجم        | نص                    | حجم الزر. يوجد خياران: `صغير` و `متوسط`                                            |
    | الموقع       | نص                    | موقع الزر بالنسبة لأخوته. تشمل الخيارات: `standalone`، `left`، `right`، و`middle`. |
    | تطبيق الظل   | قيمة منطقية           | يحدد إذا ما سيتم تطبيق الظلال على الزر                                             |
    | تطبيق الضباب | قيمة منطقية           | يحدد ما إذا كان ينبغي تطبيق تأثير الضباب على الزر                                  |
    | معطل         | قيمة منطقية           | يحدد ما إذا كان الزر معطل                                                          |
    | تركيز        | قيمة منطقية           | يحدد إذا كان الزر في وضع التركيز                                                   |
    | عند النقر    | وظيفة                 | وظيفة رد فعل تنطلق عند نقر المستخدم على الزر                                       |
    | فعّال        | قيمة منطقية           | يحدد إذا كان الزر في وضع فعّال                                                     |
  </Tab>
</Tabs>

## مجموعة أزرار الرموز العائمة

<Tabs>
  <Tab title="الاستخدام">
    ```jsx theme={null}
    import { FloatingIconButtonGroup } from "@/ui/input/button/components/FloatingIconButtonGroup";
    import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";

    export const MyComponent = () => {
      const iconButtons = [
        {
          Icon: IconClipboardText,
          onClick: () => console.log("Button 1 clicked"),
          isActive: true,
        },
        {
          Icon: IconCheckbox,
          onClick: () => console.log("Button 2 clicked"),
          isActive: true,
        },
      ];

      return (
        <FloatingIconButtonGroup
        className
        size="small"
        iconButtons={iconButtons} />
      );
    };

    ```
  </Tab>

  <Tab title="الخصائص">
    | الخصائص      | النوع  | الوصف                                                                                                                                                                                                             |
    | ------------ | ------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
    | className    | string | اسم اختياري لتنسيقات إضافية                                                                                                                                                                                       |
    | الحجم        | string | حجم الزر. يوجد خياران: `صغير` و `متوسط`                                                                                                                                                                           |
    | أزرار الرموز | array  | مجموعة من الكائنات، يمثل كل منها زر رمز في المجموعة. يجب أن يشمل كل كائن مكون الرمز الذي تريد عرضه في الزر، الوظيفة التي ترغب في استدعائها عند نقر المستخدم على الزر، وما إذا كان الزر ينبغي أن يكون نشطًا أم لا. |
  </Tab>
</Tabs>

## زر خفيف

<Tabs>
  <Tab title="الاستخدام">
    ```jsx theme={null}
    import { LightButton } from "@/ui/input/button/components/LightButton";

    export const MyComponent = () => {
      return <LightButton
      className
      icon={null}
      title="Title"
      accent="secondary"
      active={false}
      disabled={false}
      focus={true}
      onClick={()=>console.log('click')}
      />;
    };
    ```
  </Tab>

  <Tab title="الإزاحة">
    | الإزاحة   | النوع             | الوصف                                                                      |
    | --------- | ----------------- | -------------------------------------------------------------------------- |
    | className | string            | اسم اختياري لتنسيقات إضافية                                                |
    | أيقونة    | `React.ReactNode` | الرمز الذي تريد عرضه في الزر                                               |
    | العنوان   | string            | محتوى نص الزر                                                              |
    | accent    | string            | موقع الزر بالنسبة لأخوته. لون الزر المميز تشمل الخيارات: `ثانوي` و `ثالثي` |
    | نشط       | قيمة منطقية       | يحدد إذا كان الزر في وضع فعّال                                             |
    | معطل      | قيمة منطقية       | يحدد ما إذا كان الزر معطل                                                  |
    | تركيز     | قيمة منطقية       | يحدد إذا كان الزر في وضع التركيز                                           |
    | عند النقر | وظيفة             | وظيفة رد فعل تنطلق عند نقر المستخدم على الزر                               |
  </Tab>
</Tabs>

## زر أيقونة خفيف

<Tabs>
  <Tab title="الاستخدام">
    ```jsx theme={null}
    import { LightIconButton } from "@/ui/input/button/components/LightIconButton";
    import { IconSearch } from "@tabler/icons-react";

    export const MyComponent = () => {
      return (
        <LightIconButton
          className
          testId="test1"
          Icon={IconSearch}
          title="Title"
          size="small"
          accent="secondary"
          active={true}
          disabled={false}
          focus={true}
          onClick={() => console.log("click")}
        />
      );
    };
    ```
  </Tab>

  <Tab title="العناصر">
    | العناصر   | النوع                 | الوصف                                            |
    | --------- | --------------------- | ------------------------------------------------ |
    | className | string                | اسم اختياري لتنسيقات إضافية                      |
    | testId    | string                | معرف اختبار للزر                                 |
    | أيقونة    | `React.ComponentType` | مكون أيقونة اختياري يظهر داخل الزر               |
    | العنوان   | string                | محتوى نصي للزر                                   |
    | الحجم     | string                | حجم الزر. يوجد خياران: `صغير` و `متوسط`          |
    | accent    | string                | لون الزر المميز تشمل الخيارات: `ثانوي` و `ثالثي` |
    | نشط       | قيمة منطقية           | يحدد ما إذا كان الزر في حالة نشطة                |
    | معطل      | قيمة منطقية           | يحدد ما إذا كان الزر معطلاً                      |
    | التركيز   | قيمة منطقية           | يشير إلى ما إذا كان الزر لديه تركيز              |
    | عند النقر | function              | وظيفة رد اتصال تتفعّل عند نقر المستخدم على الزر  |
  </Tab>
</Tabs>

## الزر الرئيسي

<Tabs>
  <Tab title="الاستخدام">
    ```jsx theme={null}
    import { MainButton } from "@/ui/input/button/components/MainButton";
    import { IconCheckbox } from "@tabler/icons-react";

    export const MyComponent = () => {
      return (
        <MainButton
          title="Checkbox"
          fullWidth={false}
          variant="primary"
          soon={false}
          Icon={IconCheckbox}
        />
      );
    };
    ```
  </Tab>

  <Tab title="العناصر">
    | العناصر        | النوع                            | الوصف                                                          |
    | -------------- | -------------------------------- | -------------------------------------------------------------- |
    | العنوان        | string                           | محتوى نصي للزر                                                 |
    | عرض كامل       | قيمة منطقية                      | يحدد ما إذا كان الزر يجب أن يمتد على كامل عرض الحاوية          |
    | التنوع         | string                           | النمط البصري للزر. تشمل الخيارات `أساسي` و `ثانوي`             |
    | قريباً         | قيمة منطقية                      | يشير إلى ما إذا كان الزر معلمًا "قريبًا" (مثل الميزات القادمة) |
    | أيقونة         | `React.ComponentType`            | مكون أيقونة اختياري يظهر داخل الزر                             |
    | خصائص زر React | `React.ComponentProps<'button'>` | كل خصائص زر HTML القياسية مدعومة                               |
  </Tab>
</Tabs>

## زر أيقونة دائري

<Tabs>
  <Tab title="الاستخدام">
    ```jsx theme={null}
    import { RoundedIconButton } from "@/ui/input/button/components/RoundedIconButton";
    import { IconSearch } from "@tabler/icons-react";

    export const MyComponent = () => {
      return (
        <RoundedIconButton
          Icon={IconSearch}
        />
      );
    };
    ```
  </Tab>

  <Tab title="العناصر">
    | العناصر        | النوع                                           | الوصف |
    | -------------- | ----------------------------------------------- | ----- |
    | أيقونة         | `React.ComponentType`                           |       |
    | خصائص زر React | `React.ButtonHTMLAttributes<HTMLButtonElement>` |       |
  </Tab>
</Tabs>