토글 버튼

한 번 누르고 끝나는 동작이 아니라, '켜짐/꺼짐' 상태를 사용자가 직접 쥐고 유지하는 컨트롤이다. 켜졌을 때만 accent로 또렷하게, 꺼졌을 땐 조용하게 둔다. 상태가 한눈에 읽히되 화면을 시끄럽게 하지 않는 것이 토글 버튼의 원칙이다.

상태

기본 (off)

선택됨 (on)

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

활용 방법

클릭 토글 (state)

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

Preview

tsx

const [fav, setFav] = useState(false);

<ToggleButton
  active={fav}
  onClick={() => setFav(!fav)}
  icon={<Star size={13} />}
>
  즐겨찾기
</ToggleButton>

링크 토글 (URL 상태)

href 를 주면 <a> 로 렌더된다. 쿼리 파라미터로 상태를 토글하므로 공유·뒤로가기가 되고 JS 없이도 동작한다. 목록 필터 토글에 적합하다.

Preview

즐겨찾기

tsx

<ToggleButton
  href={on ? "?starred=0" : "?starred=1"}
  active={on}
  icon={<Star size={13} />}
>
  즐겨찾기
</ToggleButton>

속성

이름	타입	기본값	설명
active	boolean	false	선택 상태: true면 accent 오버레이
icon	ReactNode	-	선두 아이콘(색·채움은 호출자가 지정)
href	string	-	있으면 <a> 로 렌더(링크 토글: URL 상태)
onClick	(e) => void	-	클릭 핸들러(state 토글)
children	ReactNode	-	라벨