# Reaction Button
URL: /lynx/components/reaction-button
Source: https://github.com/daangn/seed-design/blob/dev/docs/content/lynx/components/reaction-button.mdx

콘텐츠에 좋아요나 관심 등의 반응을 남기는 컴포넌트입니다.

Lynx Engine 최소 버전: 3.6

사용 가능 버전: @seed-design/lynx-react@0.6.0, @seed-design/lynx-css@0.10.0

## Installation

- npm: npm install @seed-design/lynx-react @seed-design/lynx-css
- pnpm: pnpm add @seed-design/lynx-react @seed-design/lynx-css
- yarn: yarn add @seed-design/lynx-react @seed-design/lynx-css
- bun: bun add @seed-design/lynx-react @seed-design/lynx-css

## Usage

## Preview

```tsx
import IconBellFill from "@karrotmarket/lynx-monochrome-icon/IconBellFill";

import { Count, PrefixIcon, ReactionButton } from "@seed-design/lynx-react";

export default function Example() {
  return (
    <ReactionButton>
      <PrefixIcon icon={<IconBellFill />} />
      도움돼요
      <Count>1</Count>
    </ReactionButton>
  );
}
```

## Props

## Examples

### Small

```tsx
import IconBellFill from "@karrotmarket/lynx-monochrome-icon/IconBellFill";

import { Count, PrefixIcon, ReactionButton } from "@seed-design/lynx-react";

export default function Example() {
  return (
    <ReactionButton size="small">
      <PrefixIcon icon={<IconBellFill />} />
      도움돼요
      <Count>1</Count>
    </ReactionButton>
  );
}
```

### Xsmall

```tsx
import IconBellFill from "@karrotmarket/lynx-monochrome-icon/IconBellFill";

import { Count, PrefixIcon, ReactionButton } from "@seed-design/lynx-react";

export default function Example() {
  return (
    <ReactionButton size="xsmall">
      <PrefixIcon icon={<IconBellFill />} />
      도움돼요
      <Count>1</Count>
    </ReactionButton>
  );
}
```

### Disabled

```tsx
import IconBellFill from "@karrotmarket/lynx-monochrome-icon/IconBellFill";

import { PrefixIcon, ReactionButton } from "@seed-design/lynx-react";

export default function Example() {
  return (
    <ReactionButton disabled>
      <PrefixIcon icon={<IconBellFill />} />
      비활성
    </ReactionButton>
  );
}
```

### Loading

```tsx
import IconBellFill from "@karrotmarket/lynx-monochrome-icon/IconBellFill";
import { useState } from "@lynx-js/react";
import { PrefixIcon, ReactionButton } from "@seed-design/lynx-react";

export default function Example() {
  const [{ pressed, loading }, setState] = useState({
    pressed: false,
    loading: false,
  });

  function handleToggle() {
    "background only";
    setState((previous) => ({ pressed: previous.pressed, loading: true }));
    setTimeout(() => {
      setState((previous) => ({ pressed: !previous.pressed, loading: false }));
    }, 2000);
  }

  return (
    <ReactionButton loading={loading} pressed={pressed} onPressedChange={handleToggle}>
      <PrefixIcon icon={<IconBellFill />} />
      시간이 걸리는 토글
    </ReactionButton>
  );
}
```

`loading` 중에는 탭과 `onPressedChange`를 처리하지 않으며 pressed 상태도 바뀌지 않습니다. 작업이 끝난 뒤 `pressed`를 갱신하세요.

## 웹 버전과의 차이

<Callout type="warning">
  - `onClick` 대신 `bindtap`을 사용합니다.
  - 선택 상태는 `accessibility-role-description="toggle button"`과 `accessibility-value`로 전달합니다.
  - button과 form 속성, 키보드 focus, `asChild`는 지원하지 않습니다.
  - `loading` 중에는 탭을 막고 비활성 상태로 노출합니다.
</Callout>