Action

@hua-labs/ui

v1.2.0

파티클, 리플, 사운드, 햅틱 피드백 등의 고급 효과를 가진 액션 버튼입니다. Button 컴포넌트 기반입니다.

설치

bash

npm install @hua-labs/hua

Import

tsx

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

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

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

Pro 컴포넌트입니다. Pro 라이선스가 필요합니다.

Pro

라이브 데모

기본 스타일

효과 데모

테마 스타일

피드백 효과

• rippleEffect: 클릭 위치에서 원형 파동 효과
• particleEffect: 클릭 위치에서 파티클 분산
• soundEffect: 클릭 시 사운드 재생 (Web Audio API)
• hapticFeedback: 모바일 진동 피드백

상속

Action 확장 컴포넌트 Button 이 컴포넌트는 기본 HTML 요소의 모든 props를 상속받습니다.

Props

이름	타입	기본값	설명
`actionType`	`"primary" \| "secondary" \| "tertiary" \| "magical" \| "cyberpunk" \| "ninja" \| "wizard" \| "sniper"`	`"primary"`	Action style type
`feedback`	`"ripple" \| "particle" \| "sound" \| "haptic" \| "glitch" \| "sparkle" \| "smoke"`	`"ripple"`	Feedback type on click
`particleEffect`	`boolean`	`false`	Enable particle effect
`rippleEffect`	`boolean`	`false`	Enable ripple effect
`soundEffect`	`boolean`	`false`	Enable click sound effect
`hapticFeedback`	`boolean`	`false`	Enable haptic feedback (mobile)
`transparency`	`number`	`1`	Button opacity (0-1)
`blurIntensity`	`number`	`0`	Blur intensity in px
`glowIntensity`	`number`	`0`	Glow intensity in px
`glowColor`	`string`	`"rgba(91,140,255,.8)"`	Glow color

Code Examples

docs:common.basicUsagetsx

1import { Action } from '@hua-labs/ui';
2 
3<Action>Click Me</Action>
4 
5<Action actionType="secondary">
6  Secondary
7</Action>

docs:components.action.examples.effectCombinationstsx

1// 리플 + 파티클
2<Action rippleEffect particleEffect>
3  Ripple & Particle
4</Action>
5 
6// 사운드 + 햅틱 (모바일)
7<Action soundEffect hapticFeedback>
8  Sound & Haptic
9</Action>
10 
11// 모든 효과
12<Action
13  rippleEffect
14  particleEffect
15  soundEffect
16  hapticFeedback
17  glowIntensity={10}
18  glowColor="rgba(255,100,100,0.8)"
19>
20  All Effects
21</Action>

docs:components.action.examples.themeStylestsx

1<Action actionType="magical">Magical</Action>
2<Action actionType="cyberpunk">Cyberpunk</Action>
3<Action actionType="ninja">Ninja</Action>
4<Action actionType="wizard">Wizard</Action>
5<Action actionType="sniper">Sniper</Action>

접근성

•모션 감소: prefers-reduced-motion 설정 존중
•aria-busy: 로딩 상태일 때 설정됨

Button Toggle