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

명확한 액션을 쉽게 수행할 수 있도록 돕는 기본 인터랙션 컴포넌트입니다.

Lynx Engine 최소 버전: 3.6

사용 가능 버전: @seed-design/lynx-react@0.1.0, @seed-design/lynx-css@0.1.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

<Callout>
  Lynx `ActionButton`은 별도 `ui:action-button` snippet 없이 `@seed-design/lynx-react` 패키지에서 직접 제공합니다.
</Callout>

## Usage

## Preview

```tsx
import "./styles";
import { root, useState } from "@lynx-js/react";
import { ActionButton, useSeedClassName, VStack } from "@seed-design/lynx-react";

function Root() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  const [count, setCount] = useState(0);

  function handleTap() {
    "background only";
    setCount((value) => value + 1);
  }

  return (
    <page className={seedClassName}>
      <VStack className="action-button-preview" gap="x3">
        <text className="action-button-preview__description">버튼을 탭하면 상태가 바뀝니다.</text>
        <ActionButton variant="brandSolid" size="medium" bindtap={handleTap}>
          {count === 0 ? "탭해 보세요" : `${count}번 탭했어요`}
        </ActionButton>
        <ActionButton variant="neutralOutline" disabled={count === 0}>
          {count === 0 ? "먼저 위 버튼을 탭하세요" : "활성화됨"}
        </ActionButton>
      </VStack>
    </page>
  );
}

root.render(<Root />);
```

## Props

## Examples

### Brand Solid

```tsx
import "./styles";
import { root } from "@lynx-js/react";
import { ActionButton, useSeedClassName } from "@seed-design/lynx-react";

function Root() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  return (
    <page className={seedClassName}>
      <view className="action-button-preview">
        <ActionButton variant="brandSolid">라벨</ActionButton>
      </view>
    </page>
  );
}

root.render(<Root />);
```

### Neutral Solid

```tsx
import "./styles";
import { root } from "@lynx-js/react";
import { ActionButton, useSeedClassName } from "@seed-design/lynx-react";

function Root() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  return (
    <page className={seedClassName}>
      <view className="action-button-preview">
        <ActionButton variant="neutralSolid">라벨</ActionButton>
      </view>
    </page>
  );
}

root.render(<Root />);
```

### Neutral Weak

```tsx
import "./styles";
import { root } from "@lynx-js/react";
import { ActionButton, useSeedClassName } from "@seed-design/lynx-react";

function Root() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  return (
    <page className={seedClassName}>
      <view className="action-button-preview">
        <ActionButton variant="neutralWeak">라벨</ActionButton>
      </view>
    </page>
  );
}

root.render(<Root />);
```

### Critical Solid

```tsx
import "./styles";
import { root } from "@lynx-js/react";
import { ActionButton, useSeedClassName } from "@seed-design/lynx-react";

function Root() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  return (
    <page className={seedClassName}>
      <view className="action-button-preview">
        <ActionButton variant="criticalSolid">라벨</ActionButton>
      </view>
    </page>
  );
}

root.render(<Root />);
```

### Brand Outline

```tsx
import "./styles";
import { root } from "@lynx-js/react";
import { ActionButton, useSeedClassName } from "@seed-design/lynx-react";

function Root() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  return (
    <page className={seedClassName}>
      <view className="action-button-preview">
        <ActionButton variant="brandOutline">라벨</ActionButton>
      </view>
    </page>
  );
}

root.render(<Root />);
```

### Neutral Outline

```tsx
import "./styles";
import { root } from "@lynx-js/react";
import { ActionButton, useSeedClassName } from "@seed-design/lynx-react";

function Root() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  return (
    <page className={seedClassName}>
      <view className="action-button-preview">
        <ActionButton variant="neutralOutline">라벨</ActionButton>
      </view>
    </page>
  );
}

root.render(<Root />);
```

### Ghost

Lynx에서는 기본 Ghost 스타일을 지원합니다. 웹의 `color`, `fontWeight` 사용자 지정은 지원하지 않습니다.

```tsx
import "./styles";
import { root } from "@lynx-js/react";
import { ActionButton, useSeedClassName } from "@seed-design/lynx-react";

function Root() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  return (
    <page className={seedClassName}>
      <view className="action-button-preview">
        <ActionButton variant="ghost">Ghost</ActionButton>
      </view>
    </page>
  );
}

root.render(<Root />);
```

### Icon Only

```tsx
import "./styles";
import IconPlusFill from "@karrotmarket/lynx-monochrome-icon/IconPlusFill";
import { root } from "@lynx-js/react";
import { ActionButton, Icon, useSeedClassName } from "@seed-design/lynx-react";

function Root() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  return (
    <page className={seedClassName}>
      <view className="action-button-preview">
        <ActionButton layout="iconOnly" accessibility-label="추가">
          <Icon icon={<IconPlusFill />} />
        </ActionButton>
      </view>
    </page>
  );
}

root.render(<Root />);
```

<Callout>
  문서 미리보기에서는 아이콘 색상이 적용되지 않아요. 아이콘의 실제 색상은 QR 코드 탭에서 Lynx Explorer를 실행해 확인할 수 있어요.
</Callout>

### Prefix Icon

```tsx
import "./styles";
import IconPlusFill from "@karrotmarket/lynx-monochrome-icon/IconPlusFill";
import { root } from "@lynx-js/react";
import { ActionButton, PrefixIcon, useSeedClassName } from "@seed-design/lynx-react";

function Root() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  return (
    <page className={seedClassName}>
      <view className="action-button-preview">
        <ActionButton>
          <PrefixIcon icon={<IconPlusFill />} />
          라벨
        </ActionButton>
      </view>
    </page>
  );
}

root.render(<Root />);
```

<Callout>
  문서 미리보기에서는 아이콘 색상이 적용되지 않아요. 아이콘의 실제 색상은 QR 코드 탭에서 Lynx Explorer를 실행해 확인할 수 있어요.
</Callout>

### Suffix Icon

```tsx
import "./styles";
import IconChevronRightFill from "@karrotmarket/lynx-monochrome-icon/IconChevronRightFill";
import { root } from "@lynx-js/react";
import { ActionButton, SuffixIcon, useSeedClassName } from "@seed-design/lynx-react";

function Root() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  return (
    <page className={seedClassName}>
      <view className="action-button-preview">
        <ActionButton>
          라벨
          <SuffixIcon icon={<IconChevronRightFill />} />
        </ActionButton>
      </view>
    </page>
  );
}

root.render(<Root />);
```

<Callout>
  문서 미리보기에서는 아이콘 색상이 적용되지 않아요. 아이콘의 실제 색상은 QR 코드 탭에서 Lynx Explorer를 실행해 확인할 수 있어요.
</Callout>

### Disabled

```tsx
import "./styles";
import { root } from "@lynx-js/react";
import { ActionButton, useSeedClassName } from "@seed-design/lynx-react";

function Root() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  return (
    <page className={seedClassName}>
      <view className="action-button-preview">
        <ActionButton disabled>라벨</ActionButton>
      </view>
    </page>
  );
}

root.render(<Root />);
```

### Loading

```tsx
import "./styles";
import { root, useState } from "@lynx-js/react";
import { ActionButton, useSeedClassName } from "@seed-design/lynx-react";

function Root() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  const [loading, setLoading] = useState(false);

  function handleTap() {
    "background only";
    setLoading(true);
    setTimeout(() => setLoading(false), 2000);
  }

  return (
    <page className={seedClassName}>
      <view className="action-button-preview">
        <ActionButton loading={loading} bindtap={handleTap}>
          시간이 걸리는 액션
        </ActionButton>
      </view>
    </page>
  );
}

root.render(<Root />);
```

## 웹 버전과의 차이

<Callout type="warning">
  Lynx `ActionButton`은 React `ActionButton`과 다음과 같은 차이가 있습니다.

  - **이벤트 핸들링**: `onClick` 대신 `bindtap`을 사용합니다.
  - **렌더링 요소**: HTML `<button>` 대신 네이티브 `<view>`/`<text>` 요소를 렌더링합니다.
  - **접근성 라벨링**: `aria-label` 대신 Lynx native `accessibility-label`을 사용합니다.
  - **ref forwarding**: `React.forwardRef`로 ref를 전달할 수 있습니다.
  - **아이콘 렌더링 방식**: 웹의 SVG `currentColor` 대신 Lynx `<image>`의 `tint-color`를 사용합니다. `Icon` / `PrefixIcon` / `SuffixIcon`이 recipe color를 native tint로 동기화합니다.
  - **호환 아이콘 prop**: 기존 `prefixIcon` / `suffixIcon` / `icon` prop도 계속 지원하지만, 기본 예시는 child slot API를 사용합니다.
  - **Loading 상태**: 웹과 동일하게 spinner를 absolute로 얹고 기존 content를 숨겨 원래 버튼 폭을 유지합니다.
</Callout>

## Lynx 미지원 기능

현재 Lynx 플랫폼 제약으로 다음 기능이 지원되지 않습니다.

| 기능                  | 웹 대응       | 설명                    |
| ------------------- | ---------- | --------------------- |
| `color`             | StyleProps | CSS variable 동적 주입 제한 |
| `fontWeight`        | StyleProps | CSS variable 동적 주입 제한 |
| `bleedX` / `bleedY` | StyleProps | CSS variable 동적 주입 제한 |

React 문서의 **Bleed** 예제는 `bleedX`와 `bleedY`가 필요하므로 Lynx Examples에서 제외했습니다.