AXIS
Components/Button

Button

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

Installation

bash
npx axis-cli add button

Usage

tsx
import { Button } from '@axis-ds/ui-react'

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

variant
Type:"default" | "destructive" | "outline" | "secondary" | "ghost" | "link"
Default:"default"

버튼 스타일 변형

size
Type:"default" | "sm" | "lg" | "icon"
Default:"default"

버튼 크기

asChild
Type:boolean
Default:false

Slot 컴포넌트로 렌더링 (Radix)

disabled
Type:boolean
Default:false

비활성화 상태

className
Type:string
Default:-

추가 CSS 클래스