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

# زر التفاعل

> بدّل تفاعل إيموجي يتضمن عددا وحالة ضغط متحكما بها.

## نظرة عامة

يتألف `ReactionButton` من [زر](https://docs.twenty.com/ar/ui/primitives/input/button.md) لتكوين تفاعل إيموجي مدمج مع عدد. يوفر تطبيقك حالة الضغط والاسم المتاح ومعالج التغيير.

**Light**

[تفاعل مفيد متحكم به مع تلميح إجراء إعادة تعيين (light)](https://storybook.twenty.com/iframe.html?id=ui-components-reactionbutton--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[تفاعل مفيد متحكم به مع تلميح إجراء إعادة تعيين (dark)](https://storybook.twenty.com/iframe.html?id=ui-components-reactionbutton--display\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-components-reactionbutton--display)

## استخدام

```tsx theme={null}
import { useState } from 'react';
import {
  ReactionButton,
  type ReactionButtonProps,
} from 'twenty-ui/components/input';
import { Button } from 'twenty-ui/primitives/input';
import { Tooltip } from 'twenty-ui/primitives/surfaces';
import { Text } from 'twenty-ui/primitives/typography';
import { themeCssVariables } from 'twenty-ui/theme';

export const ReactionButtonExample = ({
  emoji = '👍',
  disabled,
  loading,
}: Partial<Pick<ReactionButtonProps, 'emoji' | 'disabled' | 'loading'>>) => {
  const [pressed, setPressed] = useState(false);
  const count = pressed ? 3 : 2;

  return (
    <Text
      style={{
        display: 'flex',
        flexDirection: 'column',
        gap: themeCssVariables.spacing[2],
      }}
    >
      <Text>Was this helpful?</Text>
      <Text
        render={<span />}
        style={{
          display: 'flex',
          alignItems: 'center',
          gap: themeCssVariables.spacing[1],
        }}
      >
        <Tooltip content={`${count} people found this helpful`}>
          <ReactionButton
            aria-label="Helpful"
            emoji={emoji}
            count={count}
            pressed={pressed}
            onPressedChange={setPressed}
            disabled={disabled}
            loading={loading}
          />
        </Tooltip>
        <Button size="sm" variant="ghost" onClick={() => setPressed(false)}>
          Reset
        </Button>
      </Text>
    </Text>
  );
};
```

## المظهر

يبلغ ارتفاع عنصر التحكم 24px، وله زوايا مستديرة وإيموجي بحجم 16px وعدد صغير. تستخدم التفاعلات المضغوطة سطح التمييز ونصه الخاصين بالسمة. تستخدم التفاعلات غير المضغوطة سطحا شفافا ونصا ثانويا.

يقبل `count` رقما أو سلسلة نصية منسقة بواسطة المستدعي. يتولى تطبيقك تنسيق الأرقام واختصارها وتحديد ما إذا كان سيعرض تفاعلا بعدد صفري.

**Light**

[اختيار التفاعل والأعداد والحالات غير المتاحة (light)](https://storybook.twenty.com/iframe.html?id=ui-components-reactionbutton--catalog\&viewMode=story\&globals=colorScheme:light)

**Dark**

[اختيار التفاعل والأعداد والحالات غير المتاحة (dark)](https://storybook.twenty.com/iframe.html?id=ui-components-reactionbutton--catalog\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-components-reactionbutton--catalog)

## ملكية الحالة

`pressed` مطلوب ويتحكم به تطبيقك. يستدعي التنشيط `onPressedChange` بالقيمة التالية المطلوبة. يستمر المكون في عرض قيمتي `pressed` و`count` الموفرين إلى أن يحدّثهما تطبيقك.

عيّن `loading` أثناء انتظار طفرة لعرض مؤشر تحميل Button ومنع التنشيط المتكرر. يحافظ على قيمة `pressed` الموفرة ويضع علامة انشغال على عنصر التحكم. استخدم `disabled` عندما يكون التفاعل غير متاح. يبقى الاختيار والأعداد والأذونات والاستمرارية وأي تحديثات تفاؤلية في التطبيق.

يعمل `onClick` الأصلي قبل طلب التغيير. يؤدي استدعاء `event.preventDefault()` في ذلك المعالج إلى إلغاء الطلب. تُمرر سمات الزر الأصلية الأخرى ومعالجاته وأنماطه وأسماء فئاته ومراجعه إلى الزر. يستخدم عنصر التحكم دائما `type="button"`.

## إمكانية الوصول وتلميحات الأدوات

وفّر `aria-label` أو `aria-labelledby` مع اسم تفاعل مترجم محليا. الإيموجي والعدد للزينة ومخفيان عن التقنية المساعدة، لذا ضمّن معلومات العدد أو المشاركين في الاسم أو الوصف الموفّر عند الحاجة. حافظ على استقرار اسم التفاعل عند تغير حالته؛ إذ يعبّر `aria-pressed` عن الاختيار.

يدعم الزر الأصلي تركيز Tab والتنشيط باستخدام Enter أو Space. يمنع كل من `disabled` و`loading` التنشيط. يشير المرجع إلى الزر الأصلي.

استخدم [تلميح الأدوات](https://docs.twenty.com/ar/ui/primitives/surfaces/tooltip.md) لتفاصيل المشاركين عند التمرير والتركيز باستخدام لوحة المفاتيح، كما هو موضح أعلاه، أو مرّر `title` أصليا. ينتمي محتوى تلميح الأدوات إلى المستدعي ولا يحل محل الاسم المتاح. لا تؤدي التسميات الطويلة المتاحة إلى تكبير عنصر التحكم المرئي.

## الإزاحة

**aria-label** `string`

Accessible name describing the reaction. Required unless `aria-labelledby` supplies the name.

**aria-labelledby** `string`

ID of the element supplying the accessible name. Can be used instead of `aria-label`.

**count** `string | number` *required*

Displayed count. Pass a string for localized or abbreviated formatting. Hidden from assistive technology.

**disabled** `boolean` (default: false)

Disables the native button and prevents activation.

**emoji** `string` *required*

Emoji displayed beside the count. Hidden from assistive technology.

**loading** `boolean` (default: false)

Shows a loading indicator, sets `aria-busy`, and prevents activation without changing the supplied pressed state.

**onClick** `MouseEventHandler\<HTMLButtonElement\>`

Native click handler called before `onPressedChange`. Calling `preventDefault()` cancels the change request.

**onPressedChange** `(pressed: boolean) =\> void` *required*

Requests the next pressed state after activation. The caller updates `pressed` and `count`.

**pressed** `boolean` *required*

Controlled selection state. Sets the selected appearance and `aria-pressed`.

**title** `string`

Optional native tooltip text supplied by the caller.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.