토글 버튼

한 번 누르고 끝나는 동작이 아니라, 켜짐/꺼짐 상태를 사용자가 직접 쥐고 유지하는 컨트롤이다. Muse에서는 저장한 글, 추천한 작품, 선택한 주제처럼 독자의 상태를 지면 위에 조용하지만 또렷하게 남긴다.

상태

기본 (off)

선택됨 (on)

선택됨은 active 로 제어: accent 오버레이(border-accent + bg-accent/10).

활용 방법

클릭 토글 (state)

active 를 state 로 두고 onClick 에서 뒤집는다.

Preview

tsx

const [saved, setSaved] = useState(false);

<ToggleButton
  active={saved}
  onClick={() => setSaved(!saved)}
  icon={<Star size={13} />}
>
  Saved
</ToggleButton>

링크 토글 (URL 상태)

href 를 주면 <a> 로 렌더된다. 컬렉션 필터나 주제 선택처럼 공유 가능한 상태에 적합하다.

Preview

Saved

tsx

<ToggleButton
  href={saved ? "?saved=0" : "?saved=1"}
  active={saved}
  icon={<Star size={13} />}
>
  Saved
</ToggleButton>

속성

이름	타입	기본값	설명
active	boolean	false	선택 상태: true면 accent 오버레이
icon	ReactNode	-	선두 아이콘
href	string	-	있으면 <a> 로 렌더
onClick	(e) => void	-	클릭 핸들러
children	ReactNode	-	라벨