Button
다양한 스타일과 크기의 버튼 컴포넌트입니다.
설치
Terminal
npx @msub-core/ui-cli add button
사용법
TSX
import { Button } from "@msub-core/ui/components/button"
function MyComponent() {
return (
<Button onClick={() => console.log("clicked")}>
클릭하세요
</Button>
)
}Props
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| variant | "default" | "secondary" | "outline" | "ghost" | "link" | "destructive" | "success" | "warning" | "default" | No | 버튼 스타일 변형 |
| size | "default" | "sm" | "lg" | "xl" | "icon" | "default" | No | 버튼 크기 |
| radius | "none" | "sm" | "default" | "lg" | "full" | "sm" | No | 버튼 모서리 둥글기 |
| fullWidth | boolean | false | No | 전체 너비 차지 여부 |
| loading | boolean | false | No | 로딩 상태 (스피너 표시) |
| disabled | boolean | false | No | 비활성화 상태 |
| leftIcon | ReactNode | - | No | 왼쪽 아이콘 |
| rightIcon | ReactNode | - | No | 오른쪽 아이콘 |
| asChild | boolean | false | No | 자식 요소로 렌더링 (Radix Slot 사용) |