Button
다양한 스타일과 상태를 지원하는 버튼 컴포넌트입니다.
import { Button } from 'sud-ui';사용할 때
사용자의 주요 행동을 유도할 때 (예: 제출, 저장, 확인)
폼이나 다이얼로그에서 작업을 완료하거나 취소할 때
사용자에게 추가 정보나 다음 단계로 이동할 수 있는 옵션을 제공할 때
작업의 진행 상태를 표시할 때 (로딩 상태)
사용자의 선택이나 결정을 확인할 때
주요 기능이나 액션에 대한 접근성을 제공할 때
사용예제
Basic Usage
기본적인 사용 방법입니다.
shape
버튼의 모양을 설정할 수 있습니다.
Disabled
버튼을 비활성화할 수 있습니다.
Color Custom
버튼의 색상을 커스텀할 수 있습니다.
borderType
버튼의 테두리 스타일을 설정할 수 있습니다.
Loading
버튼을 로딩 상태로 설정할 수 있습니다.
Icon
버튼에 아이콘을 추가할 수 있습니다.
Size
버튼의 크기를 조절할 수 있습니다.
사용 방법
컴포넌트의 props를 설정하는 방법입니다.
| type | 네이티브 버튼 타입. 폼 제출 버튼은 submit을 명시해야 합니다. | button | submit | reset | button |
| children | 버튼의 내용 | ReactNode | - |
| colorType | 버튼의 색상 타입 | default | primary | success | warning | danger | info | red | rose | coral | orange | volcano | apricot | yellow | gold | amber | green | lime | mint | blue | sky | cerulean | indigo | cobalt | navy | purple | plum | orchid | forest | sage | warm-gray | cool-gray | neutral | text | ghost | default |
| background | 배경색(palette값 또는 HEX code) | string | - |
| color | 텍스트 색상(palette값 또는 HEX code) | string | - |
| border | 테두리 표시 여부 | boolean | true |
| borderColor | 테두리 색상(palette값 또는 HEX code) | string | - |
| borderType | 테두리 스타일 | solid | dashed | dotted | double | groove | ridge | inset | outset | none | solid |
| borderWeight | 테두리 두께 | number | 1 |
| icon | 버튼에 표시할 아이콘 | ReactNode | - |
| iconPosition | 아이콘의 위치 | left | right | left |
| disabled | 버튼 비활성화 여부 | boolean | false |
| loading | 로딩 상태 표시 여부 | boolean | false |
| loadingText | 로딩 상태일 때 표시할 텍스트 | string | - |
| loadingType | 로딩 스피너의 타입 | default | elastic | brush | default |
| loadingPosition | 로딩 표시 위치 | left | right | right |
| size | 버튼 크기 | sm | md | lg | md |
| shape | 버튼의 모양 | square | circle | rounded | capsule | rounded |
| shadow | 버튼의 그림자 효과 | none | sm | md | lg | sm |
| onClick | 클릭 이벤트 핸들러 (disabled나 loading 상태에서는 실행되지 않음) | (event: React.MouseEvent<HTMLButtonElement>) => void | - |
| className | 추가 클래스명 | string | - |
| style | 추가 스타일 | CSSProperties | {} |
| ariaLabel | ARIA 라벨 (접근성) | string | - |
| ariaPressed | ARIA pressed 상태 (토글 버튼용) | boolean | - |
| ariaExpanded | ARIA expanded 상태 (드롭다운 버튼용) | boolean | - |
| ariaControls | ARIA controls 속성 (제어하는 요소의 ID) | string | - |
| role | 필요한 경우 재정의할 ARIA 역할. 기본값은 네이티브 button 역할입니다. | string | - |