기본 버튼

한 번 누르고 끝나는 동작을 일으키는 가장 기본적인 컨트롤이다. 화면에서 가장 중요한 동작 하나만 primary 로 채워 또렷하게 강조하고, 나머지는 default·ghost 로 절제한다. 토글 버튼과 같은 결(rounded·press 축소)에서 출발하되, 상태를 쥐는 대신 동작을 실행한다.

상태

default

primary

ghost

danger

disabled

강조는 variant 로: 한 화면에 primary 는 하나만 두고 나머지는 default·ghost 로 낮춘다.

활용 방법

클릭 액션

onClick 으로 동작을 실행한다. 가장 중요한 액션은 primary 로.

Preview

장바구니 0

tsx

const [count, setCount] = useState(0);

<Button
  variant="primary"
  icon={<Plus size={13} />}
  onClick={() => setCount((c) => c + 1)}
>
  담기
</Button>

크기 · 아이콘

size 로 sm·md 를 고르고, icon 으로 선두 아이콘을 단다(색은 호출자가 지정).

Preview

tsx

<Button size="sm" icon={<Plus size={12} />}>작게</Button>
<Button size="md" icon={<Plus size={13} />}>보통</Button>

이미지 아이콘 (파비콘)

image 에 이미지 URL 을 주면 선두 아이콘이 파비콘 이미지가 된다. 로드 실패 시 라벨 첫 글자 배지로 폴백한다(ASUS 처럼). 외부 사이트·앱 바로가기 버튼에 쓴다.

Preview

tsx

<Button image="https://.../github.png">GitHub</Button>

{/* 로드 실패 → 라벨 첫 글자 폴백 */}
<Button image="https://broken">ASUS</Button>

링크 버튼 (네비게이션)

href 를 주면 <a> 로 렌더된다. 페이지 이동 같은 네비게이션 액션에 쓴다.

Preview

새로 만들기

tsx

<Button href="/new" variant="primary" icon={<Plus size={13} />}>
  새로 만들기
</Button>

파괴적 동작 · 비활성

되돌리기 어려운 동작은 danger 로 경고하고, 조건이 안 맞으면 disabled 로 막는다.

Preview

tsx

<Button variant="danger" icon={<Trash2 size={13} />}>삭제</Button>
<Button disabled>저장</Button>

속성

이름	타입	기본값	설명
variant	"default" \| "primary" \| "ghost" \| "danger"	"default"	강조 단계: primary 는 채움, ghost 는 테두리 없음, danger 는 파괴적 동작
size	"sm" \| "md"	"md"	버튼 크기
icon	ReactNode	-	선두 아이콘(색·채움은 호출자가 지정)
image	string	-	선두 아이콘을 이미지(파비콘 등)로: URL. icon 보다 우선, 실패 시 라벨 첫 글자 폴백
imageFallback	string	-	이미지 실패 시 폴백 글자(미지정 시 라벨 첫 글자)
href	string	-	있으면 <a> 로 렌더(네비게이션 액션)
onClick	(e) => void	-	클릭 핸들러
disabled	boolean	false	흐리게 표시 + 클릭 차단
type	"button" \| "submit" \| "reset"	"button"	<button> 일 때 폼 동작
children	ReactNode	-	라벨