Button

@hua-labs/ui

v1.1.0

다양한 스타일, 크기, 로딩 상태, 호버 효과를 지원하는 다용도 버튼 컴포넌트입니다.

설치

bash

npm install @hua-labs/hua

Import

tsx

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

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

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

라이브 데모

변형

그라디언트

크기

아이콘과 함께

상태

호버 효과

둥글기 & 그림자

Props

이름	타입	기본값	설명
`variant`	`"default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| "link" \| "gradient" \| "neon" \| "glass"`	`"default"`	The visual style of the button
`size`	`"sm" \| "md" \| "lg" \| "xl" \| "icon"`	`"md"`	The size of the button
`hover`	`"springy" \| "scale" \| "glow" \| "slide" \| "none"`	`"springy"`	Hover animation effect. 'springy' is the HUA UI signature
`rounded`	`"sm" \| "md" \| "lg" \| "full"`	`"md"`	Border radius size
`shadow`	`"none" \| "sm" \| "md" \| "lg" \| "xl"`	`"md"`	Shadow depth
`loading`	`boolean`	`false`	Shows loading spinner and disables button
`disabled`	`boolean`	`false`	Disables the button
`icon`	`React.ReactNode`	-	Icon element to display
`iconPosition`	`"left" \| "right"`	`"left"`	Position of the icon relative to text
`iconOnly`	`boolean`	`false`	Renders icon only (requires aria-label)
`fullWidth`	`boolean`	`false`	Makes button full width
`gradient`	`"blue" \| "purple" \| "green" \| "orange" \| "pink" \| "custom"`	`"blue"`	Gradient color (when variant='gradient')
`customGradient`	`string`	-	Custom Tailwind gradient classes
`href`	`string`	-	Renders as anchor tag when provided
`asChild`	`boolean`	`false`	Merge props with child element (Slot pattern)

Code Examples

기본 사용법tsx

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

<Button>Click me</Button>
<Button variant="destructive">Delete</Button>
<Button variant="outline">Cancel</Button>

아이콘과 함께tsx

<Button icon={<DownloadSimple />}>Download</Button>
<Button icon={<PaperPlaneTilt />} iconPosition="right">Send</Button>

상태tsx

<Button loading>Saving...</Button>

그라디언트tsx

<Button variant="gradient" gradient="purple">Get Started</Button>

특수 기능

링크로 사용하기

href prop을 제공하면 자동으로 <a> 태그로 렌더링됩니다.

View on GitHub

전체 너비

fullWidth prop으로 버튼을 컨테이너 전체 너비로 확장합니다.

접근성

•키보드: Tab으로 탐색, Enter/Space로 활성화 가능
•비활성화 상태: 비활성화 상태
•aria-busy: 로딩 상태 시 적용
•모션 감소: prefers-reduced-motion 설정 존중
•아이콘만 표시: iconOnly 사용 시 aria-label 필수

Action