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

# Buton de reacție

> Comută o reacție emoji cu un număr și o stare apăsată controlată.

## Prezentare generală

`ReactionButton` compune [Button](https://docs.twenty.com/ro/ui/primitives/input/button.md) într-o reacție emoji compactă cu un număr. Aplicația dvs. furnizează starea apăsată, numele accesibil și gestionarul de modificări.

**Light**

[Reacție utilă controlată, cu o indicație contextuală și o acțiune de resetare (light)](https://storybook.twenty.com/iframe.html?id=ui-components-reactionbutton--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Reacție utilă controlată, cu o indicație contextuală și o acțiune de resetare (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)

## Utilizare

```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>
  );
};
```

## Aspect

Controlul are înălțimea de 24 px, cu colțuri rotunjite, un emoji de 16 px și un număr mic. Reacțiile apăsate folosesc suprafața și textul de accent ale temei. Reacțiile neapăsate folosesc o suprafață transparentă și text secundar.

`count` acceptă un număr sau un șir formatat de apelant. Aplicația dvs. gestionează formatarea numerelor, abrevierea și dacă se afișează o reacție cu numărul zero.

**Light**

[Selectarea reacțiilor, numerele și stările indisponibile (light)](https://storybook.twenty.com/iframe.html?id=ui-components-reactionbutton--catalog\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Selectarea reacțiilor, numerele și stările indisponibile (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)

## Gestionarea stării

`pressed` este obligatoriu și este controlat de aplicația dvs. Activarea apelează `onPressedChange` cu următoarea valoare solicitată. Componenta continuă să afișeze valorile furnizate pentru `pressed` și `count` până când aplicația dvs. le actualizează.

Setați `loading` cât timp o mutație este în așteptare pentru a afișa indicatorul de încărcare al Button și a preveni activarea repetată. Aceasta păstrează valoarea furnizată pentru `pressed` și marchează controlul ca ocupat. Utilizați `disabled` când reacția este indisponibilă. Selectarea, numerele, permisiunile, persistența și orice actualizări optimiste rămân în aplicație.

`onClick` nativ se execută înaintea solicitării de modificare. Apelarea `event.preventDefault()` în acel gestionar anulează solicitarea. Alte atribute, gestionare, stiluri, nume de clase și referințe ale butonului nativ sunt transmise butonului. Controlul utilizează întotdeauna `type="button"`.

## Accesibilitate și indicații contextuale

Furnizați `aria-label` sau `aria-labelledby` cu un nume localizat al reacției. Emoji-ul și numărul sunt decorative și ascunse de tehnologia de asistență, așadar includeți informații despre număr sau participanți în numele ori descrierea furnizată, când este necesar. Păstrați numele reacției stabil pe măsură ce starea sa se modifică; `aria-pressed` comunică selectarea.

Butonul nativ acceptă focalizarea cu Tab și activarea cu Enter sau Spațiu. Atât `disabled`, cât și `loading` împiedică activarea. Referința indică butonul nativ.

Compuneți [Tooltip](https://docs.twenty.com/ro/ui/primitives/surfaces/tooltip.md) pentru detalii despre participanți la trecerea cu cursorul și la focalizarea de la tastatură, după cum se arată mai sus, sau transmiteți un `title` nativ. Conținutul indicației contextuale aparține apelantului și nu înlocuiește numele accesibil. Etichetele accesibile lungi nu măresc controlul vizibil.

## Proprietăți

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