Skip to Content
ComponentsFoundationToggle

Toggle

On/Off 상태를 전환하는 토글 버튼 컴포넌트

개요

Toggle 컴포넌트는 base-ui의 Toggle Primitive를 기반으로 구축된 토글 버튼입니다. 텍스트 서식, 필터 옵션, 뷰 모드 전환 등에 사용됩니다. 눌린 상태(pressed)에 따라 스타일이 자동으로 변경됩니다.

주요 특징

  • ✅ Variants: default, outline 2가지 스타일
  • ✅ Sizes: xs, sm, md, lg, xl 5단계 크기
  • ✅ Pressed 상태: 눌림 상태에 따른 자동 스타일 변경
  • ✅ 접근성: base-ui 기반 aria-pressed 자동 적용
  • ✅ 디자인 토큰: 테마 커스터마이징 지원

Variants

Toggle는 2가지 variant를 지원합니다. 기본값은 default입니다.

Variant 설명

Variant설명사용 사례
default배경 없는 기본 스타일툴바 버튼
outline테두리가 있는 아웃라인 스타일필터, 옵션 선택

Sizes

Toggle는 5가지 크기를 지원합니다. 기본값은 md입니다.

사용 예시

아이콘 토글

아이콘만으로 구성된 토글 버튼입니다. aria-label을 반드시 추가합니다.

기본 눌림 상태

defaultPressed로 초기 눌림 상태를 설정합니다.

비활성 상태

Outline Variant 조합

API Reference

Props

PropTypeDefaultDescription
variant"default" | "outline""default"시각적 스타일
size"xs" | "sm" | "md" | "lg" | "xl""md"크기
pressedboolean-제어 모드 눌림 상태
defaultPressedboolean-초기 눌림 상태
onPressedChange(pressed: boolean) => void-눌림 상태 변경 콜백
disabledboolean-비활성 상태
classNamestring-추가 CSS 클래스
childrenReact.ReactNode-내용

기본 사용법

import { Toggle } from "@vortex/ui-foundation"
 
<Toggle>Toggle</Toggle>
<Toggle variant="outline">Outline</Toggle>
<Toggle size="sm">Small</Toggle>
<Toggle defaultPressed>Pressed</Toggle>

접근성

ARIA 속성

  • base-ui가 aria-pressed 자동 설정
  • 포커스 링 자동 적용 (focus-visible)

키보드 네비게이션

  • Space / Enter: 토글 전환
  • Tab: 포커스 이동

권장 사항

  • ✅ 아이콘만 사용 시 aria-label 반드시 추가
  • ✅ 시각적으로 눌림 상태를 명확히 구분
  • ❌ 네비게이션 용도로 사용하지 않기 (Button 또는 Link 사용)

관련 컴포넌트

Last updated on
TextareaiCignal Components