액션 · SINCE v0.1.0
IconButton — 접근성 이름이 필수인 원형 IconButton
아이콘만 보이는 액션에 필수 접근성 라벨, 버튼 변형, 로딩과 비활성 상태를 제공하는 React Native IconButton입니다.
IconButton 사용 시점과 역할
IconButton은 정적 노드나 color와 size를 받는 렌더 함수를 아이콘으로 사용합니다. 지름을 바꾸면 아이콘 마크가 비율에 맞춰 계산되며, accessibilityLabel을 생략한 코드는 컴파일되지 않습니다.
- accessibilityLabel을 필수 prop으로 강제
- Button과 같은 여섯 가지 색상 변형 및 loading 상태 공유
- 사용자 지정 지름에 맞춰 아이콘 크기를 자동 계산
설치와 최소 예제
IconButton: 패키지 루트 엔트리에서 import한 뒤 앱이 소유한 상태와 이벤트를 연결하세요.
TypeScript
pnpm add @gj-kit/expo-ui
import { IconButton } from '@gj-kit/expo-ui';
<IconButton accessibilityLabel="설정 열기" icon={SettingsIcon} onPress={openSettings} />접근성과 플랫폼 동작
아이콘 자체가 텍스트를 제공하지 않아도 필수 accessibilityLabel로 동작을 설명합니다. button 역할, disabled와 busy 상태가 플랫폼별 접근성 속성으로 노출됩니다.
기본 스타일은 현재 UiProvider 테마의 color, spacing, radius, typography, metric 역할에서 파생됩니다. Expo, bare React Native와 React Native Web에서 같은 prop 계약을 사용합니다.