기본 버튼

한 번 누르고 끝나는 동작을 일으키는 Muse의 기본 컨트롤이다. Editorial Web에서는 버튼도 지면의 일부처럼 보여야 하므로 과한 채움보다 잉크색, 얇은 선, 작은 각으로 콘텐츠의 리듬을 해치지 않게 둔다. 가장 중요한 동작 하나만 primary로 강조하고 나머지는 default·ghost로 낮춘다.

상태

default

primary

ghost

danger

disabled

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

활용 방법

클릭 액션

onClick 으로 동작을 실행한다. 긴 글이나 브랜드 스토리의 핵심 전환에는 primary 를 쓴다.

Preview

tsx

<Button
  variant="primary"
  icon={<Plus size={13} />}
  onClick={() => setOpen(true)}
>
  Read story
</Button>

크기 · 아이콘

size 로 sm·md 를 고르고, icon 으로 선두 아이콘을 단다. Editorial UI에서는 라벨이 주인공이고 아이콘은 보조다.

Preview

tsx

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

링크 버튼

href 를 주면 <a> 로 렌더된다. 기사·프로젝트·브랜드 스토리 이동에 쓴다.

Preview

View editorial

tsx

<Button href="/stories/muse" variant="primary">
  View editorial
</Button>

파괴적 동작 · 비활성

삭제처럼 되돌리기 어려운 동작은 danger 로 명확히 분리하고, 조건이 안 맞으면 disabled 로 막는다.

Preview

tsx

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

속성

이름	타입	기본값	설명
variant	"default" \| "primary" \| "ghost" \| "danger"	"default"	강조 단계: primary 는 잉크 채움, ghost 는 가장 조용한 액션
size	"sm" \| "md"	"md"	버튼 크기
icon	ReactNode	-	선두 아이콘
href	string	-	있으면 <a> 로 렌더
onClick	(e) => void	-	클릭 핸들러
disabled	boolean	false	흐리게 표시 + 클릭 차단
type	"button" \| "submit" \| "reset"	"button"	<button> 일 때 폼 동작
children	ReactNode	-	라벨