- 프로젝트 전반에 사용되는 메인 버튼 컴포넌트
- cva(class-variance-authority)를 사용하여 스타일 변형을 관리 (변형이 주)
- cn(twMerge + clsx)로 클래스 안전하게 합병 (합병이 주 스타일 충돌안되게)
props
| Prop 이름 |
타입 |
기본값 |
설명 |
가능한 값 |
intent |
string |
"primary" |
버튼의 배경색 테마 |
"primary" (메인 노랑), "secondary" (보조) |
size |
string |
"L" |
버튼의 크기 |
"L", "M", "S", "XS" |
thickness |
string |
- |
버튼의 두께 스타일 |
"thick", "thin" (디자인 시안 기준) |
inValid |
boolean |
false |
비활성화(유효하지 않음) 상태 여부 |
true, false |
children |
ReactNode |
- |
버튼 내부 텍스트 또는 아이콘 |
- |
className |
string |
- |
추가적인 커스텀 스타일 클래스 |
Tailwind 클래스 |
...props |
object |
- |
기타 HTML button 속성 |
onClick, type, disabled 등 |
예시
import { Button } from '@/components/ui/button/Button'
// 기본 사용 (Primary, Large)
<Button>로그인</Button>
// Secondary 테마, Medium 사이즈(고정값)
<Button intent="secondary" size="M" thickness="thin">
취소하기
</Button>
// 비활성화 상태 react-hook-form 사용시 !isValid
<Button invalid={true}>
구매 불가
</Button>
// 유연한 버튼 {...props}와 className이용 유연하게 디자인하고싶을때
<Button onClick={...} className="">{children 글자가들어감}</Button>