Button

다양한 스타일과 크기를 지원하는 버튼 컴포넌트입니다.

Installation

bash

npx axis-cli add button

Usage

tsx

import { Button } from '@ax/ui'

export function Example() {
  return <Button>Click me</Button>
}

Variants

tsx

<Button variant="default">Default</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="outline">Outline</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>

Sizes

tsx

<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>
<Button size="icon"><Mail /></Button>

With Icon

tsx

<Button>
  <Mail className="mr-2 h-4 w-4" />
  Login with Email
</Button>

<Button>
  Next
  <ChevronRight className="ml-2 h-4 w-4" />
</Button>

Loading State

tsx

<Button disabled>
  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
  Please wait
</Button>

Props

Prop	Type	Default	Description
`variant`	`"default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| "link"`	"default"	버튼 스타일 변형
`size`	`"default" \| "sm" \| "lg" \| "icon"`	"default"	버튼 크기
`asChild`	`boolean`	false	Slot 컴포넌트로 렌더링 (Radix)
`disabled`	`boolean`	false	비활성화 상태
`className`	`string`	-	추가 CSS 클래스