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

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

## Обзор

`ReactionButton` компонует [Button](https://docs.twenty.com/ru/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()` в этом обработчике отменяет запрос. Другие нативные атрибуты кнопки, обработчики, стили, имена классов и refs передаются кнопке. Элемент управления всегда использует `type="button"`.

## Доступность и подсказки

Укажите `aria-label` или `aria-labelledby` с локализованным названием реакции. Эмодзи и счётчик являются декоративными и скрыты от вспомогательных технологий, поэтому при необходимости включите информацию о счётчике или участниках в предоставленное имя или описание. Сохраняйте название реакции неизменным при изменении её состояния; `aria-pressed` сообщает о выборе.

Нативная кнопка поддерживает фокусировку с помощью Tab и активацию клавишами Enter или Space. И `disabled`, и `loading` предотвращают активацию. Ссылка ref указывает на нативную кнопку.

Комбинируйте [Tooltip](https://docs.twenty.com/ru/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.