Pressable

@hua-labs/ui

v1.0.0

누름 피드백, WCAG 터치 타겟, dot 스타일링이 내장된 인터랙티브 프리미티브.

설치

bash

npm install @hua-labs/hua

Import

tsx

import { Pressable } from "@hua-labs/hua";

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

Props

이름	타입	기본값	설명
`dot`	`string`	-	스타일링을 위한 dot 유틸리티 문자열
`asChild`	`boolean`	`false`	Slot 패턴으로 자식 요소로 렌더링
`disableMinTouch`	`boolean`	`false`	WCAG 2.1 AA 최소 터치 타겟(44×44px) 비활성화
`disabled`	`boolean`	`false`	요소 비활성화
`style`	`React.CSSProperties`	-	추가 인라인 스타일

코드 예시

기본 사용법

import { Pressable } from '@hua-labs/ui';

<Pressable dot="p.4 bg.gray-100 rounded.lg" onClick={handleClick}>
  Tap me
</Pressable>

자식 요소로 렌더링 (Slot 패턴)

import { Pressable } from '@hua-labs/ui';

<Pressable asChild dot="p.3 bg.blue-500 text.white rounded.md">
  <a href="/somewhere">Navigate</a>
</Pressable>

Text Card