Button

사용자의 행동을 실행하는 기본 인터랙션 컴포넌트예요. 크기·스타일·상태 조합으로 다양한 맥락을 지원해요. 순수 표현 컴포넌트라 서버 컴포넌트(RSC)에서도 바로 쓸 수 있어요.

사용법

tsx

import { Button } from '@openiot/ui'

export function Example() {
  return <Button variant="primary" size="md">버튼</Button>
}

Variant

5가지 스타일·톤. 기본값은 primary 예요.

tsx

<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="destructive">Destructive</Button>

Size

sm(32) · md(40) · lg(48). 기본값은 md.

아이콘

아이콘은 children 으로 배치해요. 아이콘만 쓰면 iconOnly 로 정사각 버튼을 만들고 aria-label 을 꼭 넣어요.

tsx

<Button>
  <Icon icon={Plus} size={18} /> 추가
</Button>

<Button iconOnly aria-label="추가">
  <Icon icon={Plus} size={18} />
</Button>

Loading

loading 은 스피너를 표시하고 버튼을 자동으로 비활성화해요.

상태

Hover·Pressed 는 interaction 오버레이로 표현돼요(마우스를 올려보세요). Disabled 는 회색으로 바뀌어요.

asChild (링크처럼)

asChild 로 <Link>·<a> 를 버튼 스타일로 렌더해요.

컴포넌트로 이동 GitHub

Props

Prop	Type	Default	설명
variant	'primary' \| 'secondary' \| 'outline' \| 'ghost' \| 'destructive'	'primary'	스타일·톤 (Filled·Mono·Outlined·Ghost·Danger)
size	'sm' \| 'md' \| 'lg'	'md'	높이 32 / 40 / 48px
loading	boolean	false	스피너 표시 + 자동 비활성화
iconOnly	boolean	false	아이콘만 있는 정사각 버튼
asChild	boolean	false	Radix Slot 으로 자식(예: <Link>)에 스타일 위임
disabled	boolean	—	네이티브 비활성
...props	ButtonHTMLAttributes<HTMLButtonElement>	—	나머지 모든 네이티브 button 속성