본문으로 건너뛰기

ZSBlockButton

블록 형태의 버튼 컴포넌트입니다. 다양한 intent와 variant를 지원하며, 테마 시스템과 통합되어 일관된 디자인을 제공합니다.

앱 예제 Playgroundv1.0.2
소스 보기새 창에서 열기
Interactive exampleZSBlockButton 로컬 웹 예제

예제를 선택하면 현재 저장소 소스로 만든 Expo Web 화면을 불러옵니다.

웹 미지원 또는 플랫폼 종속 기능은 실제 iOS·Android 앱에서 확인하세요.

기본 사용법​

import { ZSBlockButton } from '@0610studio/zs-ui';

export default function App() {
  return (
    <ZSBlockButton
      title="버튼"
      typo="body.2"
      onPress={() => console.log('버튼 클릭')}
    />
  );
}

Props​

PropTypeDefaultDescription
onPress() => voidRequired버튼 클릭 시 호출되는 함수
titlestringRequired버튼에 표시될 텍스트
typoTypoOptionsRequired버튼 텍스트의 타이포그래피 스타일
intentIntentOptions'primary'버튼의 의도/색상 테마
variant'solid' | 'pastel' | 'stroke''solid'버튼의 스타일 변형
prefixIconImageSourcePropTypeundefined버튼 텍스트 앞에 표시될 아이콘 (12×12, 텍스트 색으로 tint)
isLoadingbooleanfalsetrue일 때 클릭이 비활성화되고 버튼이 흐리게 표시됩니다
preventDoublePressbooleanfalsetrue일 때 2초 잠금으로 중복 실행을 막습니다 (결제·제출 등)
disabledbooleanfalse버튼 비활성화 여부
styleStyleProp<ViewStyle>undefined버튼 컨테이너의 추가 스타일
...propsViewProps-React Native View의 모든 기본 속성

Intent 옵션​

버튼의 의도와 색상을 결정합니다.

Intent설명
primary주요 액션 (기본값)
danger위험한 액션 (삭제, 취소 등)
warning경고 액션
success성공 액션
information정보 액션
grey중립적인 액션

Variant 옵션​

버튼의 시각적 스타일을 결정합니다.

solid (기본값)​

배경색이 채워진 형태의 버튼입니다. 텍스트는 흰색으로 표시되며, warning 만 노란 배경 위 대비를 위해 검은색을 사용합니다.

<ZSBlockButton
  title="Solid 버튼"
  typo="body.2"
  variant="solid"
  intent="primary"
  onPress={() => {}}
/>

pastel​

연한 배경색과 진한 텍스트 색상의 버튼입니다.

<ZSBlockButton
  title="Pastel 버튼"
  typo="body.2"
  variant="pastel"
  intent="primary"
  onPress={() => {}}
/>

stroke​

투명한 배경과 테두리만 있는 버튼입니다.

<ZSBlockButton
  title="Stroke 버튼"
  typo="body.2"
  variant="stroke"
  intent="primary"
  onPress={() => {}}
/>

특징​

  • 다양한 스타일: solid, pastel, stroke 세 가지 variant 지원
  • Intent 시스템: primary, danger, warning, success, information, grey 등 다양한 의도 표현
  • 테마 통합: 테마 시스템과 완전히 통합되어 자동으로 색상이 적용됩니다
  • 아이콘 지원: prefixIcon을 통해 버튼 앞에 아이콘 추가 가능
  • 타이포그래피 통합: TypoOptions를 통해 버튼 크기와 스타일 제어
  • 자동 패딩: typo 크기에 따라 자동으로 패딩이 조정됩니다
  • 연타 방어: 내부적으로 ZSPressable 을 사용하므로 300ms 디바운스가 기본 적용되고, preventDoublePress 로 2초 잠금까지 올릴 수 있습니다

예제​

다양한 Intent​

<ZSBlockButton title="Primary" typo="body.2" intent="primary" onPress={() => {}} />
<ZSBlockButton title="Danger" typo="body.2" intent="danger" onPress={() => {}} />
<ZSBlockButton title="Warning" typo="body.2" intent="warning" onPress={() => {}} />
<ZSBlockButton title="Success" typo="body.2" intent="success" onPress={() => {}} />
<ZSBlockButton title="Information" typo="body.2" intent="information" onPress={() => {}} />
<ZSBlockButton title="Grey" typo="body.2" intent="grey" onPress={() => {}} />

다양한 Variant​

<ZSBlockButton title="Solid" typo="body.2" variant="solid" onPress={() => {}} />
<ZSBlockButton title="Pastel" typo="body.2" variant="pastel" onPress={() => {}} />
<ZSBlockButton title="Stroke" typo="body.2" variant="stroke" onPress={() => {}} />

아이콘과 함께 사용​

import { ZSBlockButton } from '@0610studio/zs-ui';

<ZSBlockButton
  title="아이콘 버튼"
  typo="body.2"
  prefixIcon={require('./assets/icon.png')}
  onPress={() => {}}
/>

다양한 타이포그래피 크기​

<ZSBlockButton title="작은 버튼" typo="label.3" onPress={() => {}} />
<ZSBlockButton title="중간 버튼" typo="body.2" onPress={() => {}} />
<ZSBlockButton title="큰 버튼" typo="title.2" onPress={() => {}} />

커스텀 스타일​

<ZSBlockButton
  title="커스텀 스타일"
  typo="body.2"
  style={{ marginTop: 20, width: '100%' }}
  onPress={() => {}}
/>

Intent와 Variant 조합​

{/* Danger Solid */}
<ZSBlockButton
  title="삭제"
  typo="body.2"
  intent="danger"
  variant="solid"
  onPress={() => {}}
/>

{/* Success Pastel */}
<ZSBlockButton
  title="저장 완료"
  typo="body.2"
  intent="success"
  variant="pastel"
  onPress={() => {}}
/>

{/* Primary Stroke */}
<ZSBlockButton
  title="취소"
  typo="body.2"
  intent="primary"
  variant="stroke"
  onPress={() => {}}
/>