Action Button

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

Installation

npm install @seed-design/lynx-react @seed-design/lynx-css

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

Usage

import IconChevronRightLine from "@karrotmarket/lynx-monochrome-icon/IconChevronRightLine";
import IconPlusFill from "@karrotmarket/lynx-monochrome-icon/IconPlusFill";
import { ActionButton, Icon, PrefixIcon } from "@seed-design/lynx-react";

export function App() {
  return (
    <view>
      <ActionButton
        variant="brandSolid"
        size="medium"
        bindtap={() => {
          "background only";
          console.log("tapped");
        }}
      >
        <PrefixIcon icon={<IconPlusFill />} />
        버튼
      </ActionButton>

      <ActionButton
        layout="iconOnly"
        variant="neutralSolid"
        aria-label="다음"
      >
        <Icon icon={<IconChevronRightLine />} />
      </ActionButton>
    </view>
  );
}

Props

Prop

Type

icon?React.ReactElement<LynxIconElementProps, string | React.JSXElementConstructor<any>> | undefined

prefixIcon?React.ReactElement<LynxIconElementProps, string | React.JSXElementConstructor<any>> | undefined

suffixIcon?React.ReactElement<LynxIconElementProps, string | React.JSXElementConstructor<any>> | undefined

aria-label?string | undefined

flexGrow?boolean | Property.FlexGrow | undefined

children?React.ReactNode

className?string | undefined

bindtap?EventHandler<BaseTouchEvent<Target>> | undefined

main-thread:bindtap?EventHandler<BaseTouchEvent<Element>> | undefined

웹 버전과의 차이

Lynx ActionButton은 React ActionButton과 다음과 같은 차이가 있습니다.

이벤트 핸들링: onClick 대신 bindtap을 사용합니다.
렌더링 요소: HTML <button> 대신 네이티브 <view>/<text> 요소를 렌더링합니다.
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를 숨겨 원래 버튼 폭을 유지합니다.

Lynx 미지원 기능

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

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