사용법
변형
variant 속성으로 버튼의 시각적 계층을 설정해요. 주요 행동은 primary, 보조 행동은 secondary를 사용해요.
크기
size 속성으로 터치 타겟 크기를 조절해요. 모바일에서는 최소 44px 높이를 권장해요.
상태
loading과 disabled로 진행 중·비활성 상태를 표현해요.
스타일 커스터마이징
Button 사용 시 className, style로 모든 스타일을 변경할 수 있어요. CSS 변수는 컴포넌트 루트에 지정하면 variant 기본값을 덮어써요.
className / style
<Button
className="shadow-md"
style={{
--gtd-btn-bg: "#059669",
}}
/>CSS 변수
| 변수 | 설명 |
|---|---|
| --gtd-btn-bg | 배경색 |
| --gtd-btn-color | 글자색 |
| --gtd-btn-border-color | 테두리색 |
| --gtd-btn-radius | 모서리 반경 |
| --gtd-btn-min-height | 최소 높이 |
인터페이스
ButtonProps
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| variant | "primary" | "secondary" | "ghost" | "accent" | "danger" | "text" | primary | 시각적 계층 |
| size | "sm" | "md" | "lg" | md | 터치 타겟 크기 |
| fullWidth | boolean | false | 가로 100% 확장 |
| loading | boolean | false | 로딩 스피너 표시 |
| disabled | boolean | false | 비활성 상태 |
| className | string | — | 루트 요소 클래스. Tailwind·커스텀 CSS 적용 |
| style | CSSProperties | — | 인라인 스타일·CSS 변수(--gtd-*) 오버라이드 |
Button 컴포넌트 Props 표
가져오기
import { Button } from "@/components/ui/Button";