Skip to content
Docs

Action

@hua-labs/ui
v1.2.0

bash
npm install @hua-labs/hua
tsx
import { Action } from "@hua-labs/hua";
Pro

  • • rippleEffect:
  • • particleEffect:
  • • soundEffect:
  • • hapticFeedback:

Inherited Props

Action extends Button and supports all Button props including variant, size, loading, disabled, etc.

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
particleEffectbooleanfalseEnable particle effect
rippleEffectbooleanfalseEnable ripple effect
soundEffectbooleanfalseEnable click sound effect
hapticFeedbackbooleanfalseEnable haptic feedback (mobile)
transparencynumber1Button opacity (0-1)
blurIntensitynumber0Blur intensity in px
glowIntensitynumber0Glow intensity in px
glowColorstring"rgba(91,140,255,.8)"Glow color

Code Examples

docs:common.basicUsagetsx
1import { Action } from '@hua-labs/hua';
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>

  • •docs:common.accessibility.reducedMotion: docs:components.action.accessibility.reducedMotionDesc
  • •aria-busy: docs:components.action.accessibility.ariaBusy
ButtonToggle