기본 버튼

한 번 누르고 끝나는 동작을 일으키는 가장 기본적인 컨트롤이다. 화면에서 가장 중요한 동작 하나만 solid + accent 로 채워 또렷하게 강조하고, 나머지는 outline·ghost 로 절제한다. 모양은 variant(solid · outline · ghost), 의미는 tone(neutral · accent · success · warning · danger)으로 따로 고른다. success · warning 은 승인 · 완료 · 보류처럼 결과가 상태색으로 드러나는 동작에만 쓴다. 토글 버튼과 같은 결(rounded·press 축소)에서 출발하되, 상태를 쥐는 대신 동작을 실행한다.

상태

outline

solid · accent

ghost

solid · danger

solid · success

solid · warning

soft · accent

soft · warning

disabled

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

활용 방법

클릭 액션

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

Preview

장바구니 0

tsx

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

<Button
  variant="solid"
  tone="accent"
  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="solid" tone="accent" icon={<Plus size={13} />}>
  새로 만들기
</Button>

파괴적 동작 · 비활성

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

Preview

tsx

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

속성

이름	타입	기본값	설명
variant	"solid" \| "soft" \| "outline" \| "ghost"	"outline"	표면: solid 는 채움, soft 는 옅은 면(보조 강조 · 상태 단추), outline 은 테두리, ghost 는 테두리 없음
tone	"neutral" \| "accent" \| "success" \| "warning" \| "danger"	"neutral"	의미: accent 는 주요 액션, success · warning 은 승인 · 보류처럼 결과가 상태색인 동작, danger 는 되돌리기 어려운 동작
size	"sm" \| "md" \| "lg"	"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	-	라벨