Button

동작을 실행해요. 한 화면에서 primary는 하나만 두고, 나머지는 secondary나 ghost를 써요. 다른 페이지로 이동할 때는 Link를 써요.

종류

variant로 강조 수준을 정해요. danger는 삭제처럼 되돌릴 수 없는 동작에만 써요.

primary

secondary

ghost

danger

크기

sm 28 · md 32 · lg 40이에요. 아이콘만 있는 버튼은 icon 크기를 쓰고 aria-label을 꼭 달아요.

icon-sm

icon-md

icon-lg

상태

hover와 focus는 컴포넌트가 처리해요. 진행 중인 동작에는 loading을 켜서 클릭을 막고 aria-busy를 알려요.

기본

disabled

사용법

이렇게 해요한 화면에서 primary 버튼은 하나만 둬요. 보조 동작은 secondary로 왼쪽에 둬요.

이렇게 하지 않아요primary 버튼을 여러 개 나란히 두지 않아요. 무엇을 먼저 눌러야 할지 알 수 없어요.

Props

prop	값	기본값
variant	primary · secondary · ghost · danger	primary
size	sm · md · lg · icon-sm · icon-md · icon-lg	md
disabled	boolean	false
loading	boolean. 스피너 + 클릭 막기 + aria-busy	false
focusableWhenDisabled	boolean. 비활성이 돼도 포커스 유지 (aria-disabled)	false
aria-label	icon 크기일 때 필수 (타입으로 강제)	—

코드

tsx

import { Button } from '@xonic0506/sonic-ui';
import { Ellipsis, Plus } from 'lucide-react';

<Button variant="secondary">취소</Button>
<Button><Plus />API 키 만들기</Button>
<Button size="icon-md" variant="ghost" aria-label="더 보기"><Ellipsis /></Button>