Toggle

눌린 상태가 유지되는 버튼이에요. 목록 필터나 보기 옵션처럼 켜고 끄는 항목을 내용 위에 나열할 때 써요. 누르고 끝나는 동작에는 Button을, 설정 목록에서 항목 이름 옆에는 Switch를 써요.

사용 예시

즉시 반영

적용 버튼 없이 켜는 즉시 결과에 반영할 때 써요.

오늘 읽은 책에서 마음에 남은 문장을 옮겨 적었어요.

tsx

<div className="flex gap-2">  <Toggle pressed={italic} onPressedChange={setItalic}>기울임</Toggle>  <Toggle pressed={underline} onPressedChange={setUnderline}>밑줄</Toggle></div><p className={`${italic ? 'italic' : ''} ${underline ? 'underline' : ''}`}>  오늘 읽은 책에서 마음에 남은 문장을 옮겨 적었어요.</p>

권장

라벨에는 켜는 대상만 적어요. 켜짐 상태는 눌린 모양으로 보여요.

지양

라벨이 동작으로 바뀌면 지금 상태와 누른 뒤의 상태를 헷갈려요.

아이콘과 글자

아이콘을 글자 앞에 두면 켜는 대상을 빨리 알아볼 수 있어요. 아이콘만 쓰지 말고 라벨을 함께 적어요.

tsx

<Toggle pressed={bold} onPressedChange={setBold}>  <Bold />  굵게</Toggle>

크기와 모양

size는 Button과 같은 높이예요. 글자 한두 자나 아이콘만 쓰면 circle이나 square를 써요. 아이콘만 쓸 때는 aria-label을 적어요.

tsx

<Toggle size="md">무료배송</Toggle><Toggle shape="circle">월</Toggle><Toggle shape="square" aria-label="굵게"><Bold /></Toggle>

켜짐 색

기본은 neutral이에요. 켜짐이 상태의 뜻을 함께 전해야 하면 역할 색을 써요. 역할 색은 weak 배경과 글자색으로 보여요.

tsx

<Toggle color="danger" pressed={urgent} onPressedChange={setUrgent}>긴급</Toggle>

목록 필터

여러 조건을 함께 적용할 때 써요.

tsx

<div className="flex flex-wrap gap-2">  <Toggle pressed={filters.freeShipping} onPressedChange={on => setFilter('freeShipping', on)}>무료배송</Toggle>  <Toggle pressed={filters.sameDay} onPressedChange={on => setFilter('sameDay', on)}>당일출발</Toggle>  <Toggle pressed={filters.discount} onPressedChange={on => setFilter('discount', on)}>할인중</Toggle>  <Toggle pressed={filters.inStock} onPressedChange={on => setFilter('inStock', on)}>재고있음</Toggle></div>

권장

여러 항목 중 하나만 골라야 하면 ToggleGroup을 써요. 하나를 고르면 나머지는 꺼져요.

지양

Toggle은 하나씩 따로 켜져요. 3개를 모두 켜거나 모두 끌 수 있어요.

다른 컨트롤과 한 줄

Toggle과 같은 줄에 두는 컨트롤은 sm을 써요. 높이가 Toggle과 같은 32px이에요.

tsx

<div className="flex flex-wrap items-center gap-2">  <Toggle pressed={freeShipping} onPressedChange={setFreeShipping}>무료배송</Toggle>  <Toggle pressed={sameDay} onPressedChange={setSameDay}>당일출발</Toggle>  <Button color="neutral" emphasis="ghost" size="sm" onClick={() => { setFreeShipping(false); setSameDay(false) }}>    모두 끄기  </Button></div>

권장

높이가 같아서 위아래 끝이 맞아요.

지양

기본 크기 버튼은 4px 더 높아서 위아래 끝이 어긋나요.

배경에 따라

행은 Toggle을 두는 배경, 열은 surface 값이에요.

barewellpanel

well

panel

tsx

<div className="bg-bg-well rounded-r8 p-3">  <Toggle pressed={freeShipping} onPressedChange={setFreeShipping} surface="panel">무료배송</Toggle></div>

비활성

비활성이어도 배경색으로 켜짐과 꺼짐을 알 수 있어요.

활성

비활성

tsx

<Toggle pressed={bold} onPressedChange={setBold} disabled>굵게</Toggle><Toggle pressed={italic} onPressedChange={setItalic} disabled>기울임</Toggle>

컨트롤

well

panel

surface

disabled

값false

tsx

<Toggle pressed={freeShipping} onPressedChange={setFreeShipping}>무료배송</Toggle>

명세

이름
이름	값	기본
size	sm, md, lg	sm
높이가 32, 36, 40px이에요. Button과 같은 높이예요.
shape	pill, circle, square	pill
circle과 square는 너비가 높이와 같아요. 글자 한두 자나 아이콘만 쓸 때 써요.
color	neutral, brand, info, success, warning, danger	neutral
켜짐 상태의 색이에요. neutral은 solid, 나머지는 weak 배경과 글자색으로 보여요.
surface	bare, well, panel	bare
배경과 구분해야 하면 well, 배경이 well이면 panel을 써요.
pressed	boolean	-
호출하는 쪽에서 켜짐 상태를 관리해요.
defaultPressed	boolean	false
처음에 켜 둘지 정해요.
onPressedChange	(pressed: boolean, eventDetails) => void	-
켜지거나 꺼지면 호출돼요.
disabled	boolean	false
className	string	-