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 클래스

Accessibility

네이티브 <button> 요소로 렌더링되어 브라우저 기본 접근성을 그대로 따릅니다. asChild로 다른 요소(예: 링크)를 렌더링할 때는 해당 요소의 시맨틱을 유지하세요.

KeyAction
Enter버튼을 활성화합니다.
Space버튼을 활성화합니다.
Tab다음 포커스 가능 요소로 이동합니다.
  • disabled 상태는 포커스와 클릭에서 제외됩니다.
  • 아이콘 전용 버튼(size="icon")은 aria-label 또는 sr-only 텍스트로 의미를 제공하세요.