twenty/packages/twenty-docs/l/ar/twenty-ui/input/buttons.mdx

---
title: الأزرار
icon: مؤشر اليد
---

<Frame>
  <img src="/images/user-guide/views/filter.png" alt="رأس الصفحة" />
</Frame>

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

## زر

<Tabs>

<Tab title="Usage">

```jsx
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
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
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
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
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
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
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
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
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
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>