Skip to Content
ComponentsIcignalToggle

Toggle

눌림/해제 상태를 전환할 수 있는 토글 버튼

개요

Toggle은 On/Off 상태를 시각적으로 표현하는 버튼 컴포넌트입니다. 툴팁 기능이 내장되어 있어 아이콘 전용 버튼에 적합합니다.

주요 특징

  • ✅ 2가지 Variants: default, outline
  • ✅ 5가지 크기: xs, sm, md, lg, xl
  • ✅ 내장 Tooltip: tooltip prop으로 자동 표시
  • ✅ 접근성: aria-pressed, aria-label 자동 설정
  • ✅ 디자인 토큰: 테마 커스터마이징 지원

Variants

Variant 설명

Variant설명사용 사례
default기본 배경 스타일툴바 버튼
outline테두리만 있는 스타일포맷 툴바, 옵션 토글

Sizes

States

사용 예시

예시 1: 텍스트 포맷 툴바

에디터에서 텍스트 서식을 적용합니다.

예시 2: 차트 툴바

차트 뷰 옵션을 토글합니다.

API Reference

Props

PropTypeDefaultDescription
variant"default" | "outline""default"토글 변형
size"xs" | "sm" | "md" | "lg" | "xl""md"토글 크기
pressedboolean-눌림 상태 (제어)
defaultPressedboolean-기본 눌림 상태
onPressedChange(pressed: boolean) => void-상태 변경 핸들러
disabledbooleanfalse비활성화 여부
tooltipstring-툴팁 텍스트
childrenReact.ReactNode-토글 내용 (아이콘 등)
classNamestring-추가 CSS 클래스

기본 사용법

import { Toggle } from "@vortex/ui-icignal"
import { Bold } from "lucide-react"
 
<Toggle tooltip="굵게">
  <Bold className="h-4 w-4" />
</Toggle>
 
<Toggle variant="outline" pressed>
  <Bold className="h-4 w-4" />
</Toggle>

접근성

ARIA 속성

<Toggle tooltip="굵게" aria-label="텍스트 굵게">
  <Bold className="h-4 w-4" />
</Toggle>

권장 사항

  • ✅ tooltip 또는 aria-label로 버튼 목적 전달
  • ✅ 키보드: Space/Enter로 토글
  • ✅ aria-pressed 자동 설정
  • ❌ 아이콘만 사용 시 레이블 없이 배포 지양

관련 컴포넌트

Last updated on
TextareaToggleGroup