컴포넌트 / Button
Button
다양한 스타일과 크기를 지원하는 KRDS 기반 버튼 컴포넌트
import { Button } from '@hanui/react';
export default () => <Button>클릭하세요</Button>;Examples
Size
세 가지 크기를 지원합니다. 기본값은 medium입니다.
<Button size="small">Small</Button>
<Button size="medium">Medium</Button>
<Button size="large">Large</Button>Variant
다양한 시각적 스타일을 지원합니다.
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="success">Success</Button>
<Button variant="danger">Danger</Button>Ghost
배경이 투명한 버튼입니다. 덜 강조되는 액션에 사용합니다.
<Button variant="ghost">Ghost</Button>
<Button variant="ghost" size="small">Small Ghost</Button>
<Button variant="ghost" size="large">Large Ghost</Button>Outline
테두리만 있는 버튼입니다. 부차적인 액션에 사용합니다.
<Button variant="outline">Outline</Button>
<Button variant="outline" size="small">Small Outline</Button>
<Button variant="outline" size="large">Large Outline</Button>With Icons
아이콘을 텍스트 앞뒤에 배치할 수 있습니다.
<Button iconLeft={<PlusIcon />}>새로 만들기</Button>
<Button variant="secondary" iconRight={<ChevronRightIcon />}>
다음
</Button>
<Button variant="outline" iconLeft={<PlusIcon />} />Loading
비동기 작업 중임을 나타냅니다. 로딩 중에는 자동으로 비활성화됩니다.
<Button loading>로딩 중...</Button>
<Button variant="secondary" loading>저장 중...</Button>
<Button variant="outline" loading size="large">처리 중...</Button>Disabled
비활성화된 버튼은 클릭할 수 없고 시각적으로 구분됩니다.
<Button variant="primary" disabled>비활성화</Button>
<Button variant="secondary" disabled>비활성화</Button>
<Button variant="outline" disabled>비활성화</Button>
<Button variant="ghost" disabled>비활성화</Button>Full Width
className을 사용하여 전체 너비 버튼을 만들 수 있습니다.
<Button className="w-full">전체 너비 버튼</Button>
<Button variant="outline" className="w-full">전체 너비 Outline</Button>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "primary" | "secondary" | "success" | "danger" | "ghost" | "outline" | "primary" | 버튼의 시각적 스타일 |
| size | "small" | "medium" | "large" | "medium" | 버튼 크기 (32px / 40px / 48px) |
| loading | boolean | false | 로딩 상태 표시 |
| disabled | boolean | false | 비활성화 상태 |
| iconLeft | React.ReactNode | - | 왼쪽에 표시할 아이콘 |
| iconRight | React.ReactNode | - | 오른쪽에 표시할 아이콘 |
| className | string | - | 추가 CSS 클래스 (레이아웃용) |
Accessibility
이 컴포넌트는 WCAG 2.1 AA 기준을 준수합니다:
- 최소 터치 영역: 모든 버튼은 최소 32px 이상의 높이를 가집니다
- 키보드 네비게이션: Tab 키로 포커스 이동, Enter/Space로 활성화
- 포커스 표시: 포커스 시 명확한 링 표시
- ARIA 속성: loading 상태 시
aria-busy자동 설정 - 색상 대비: KRDS 색상 팔레트로 충분한 대비 보장