Component

Toggle

서식이나 보조 기능을 on/off하는 단일 토글 버튼입니다.

Playground

옵션을 조절하며 화면과 사용 코드를 함께 확인하세요.

PC 1280px

Controls

Code

import { useState } from 'react'

import { Toggle } from '@amineslab/ui'

function ToggleExample({ pressed: initialPressed = false, variant = 'outline', size = 'md', disabled = false, }: {
    pressed?: boolean;
    variant?: 'ghost' | 'outline';
    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
    disabled?: boolean;
} = {}) {
    const [pressed, setPressed] = useState(initialPressed);
    return (<Toggle pressed={pressed} onPressedChange={setPressed} variant={variant} size={size} disabled={disabled} aria-label="강조 표시">
      {pressed ? '강조 켜짐' : '강조 끔'}
    </Toggle>);
}

export default function ExamplePreview() {
  return ((<ToggleExample key={"false"} {...({"pressed":false,"variant":"outline","size":"md","disabled":false} as const)} variant={"outline"} size={"md"}/>))
}

Props

@amineslab/ui에서 Toggle, toggleVariants를 가져옵니다.

import { Toggle, toggleVariants } from '@amineslab/ui'

`Toggle`

Radix toggle props와 스타일 variant를 제공합니다.

Name	Type	Default	Description
`pressed`	`boolean`	-	controlled 상태입니다.
`defaultPressed`	`boolean`	`false`	uncontrolled 초기 상태입니다.
`onPressedChange`	`(pressed: boolean) => void`	-	상태 변경 콜백입니다.
`variant`	`'ghost' \| 'outline'`	`'ghost'`	토글 면의 표현입니다.
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	터치 영역과 패딩 크기입니다.

Examples

자주 쓰는 조합을 살펴보고, 필요한 예시의 코드를 펼쳐 확인하세요.

사용 기준

권장하는 사용

상태가 두 개이고 현재 상태를 바로 바꿀 수 있는 짧은 작업에 사용하세요.
여러 옵션 중 하나를 고르는 경우 Segment, 즉시 실행 작업은 Button을 사용하세요.
아이콘만 보여줄 때는 aria-label을 반드시 지정합니다.

피해야 할 사용

겉모양만으로 사용을 결정하지 마세요.
의미와 키보드 동작, 모바일에서의 흐름을 함께 확인하세요.

접근성

화면에 맞는 이름을 제공하고, 키보드만으로 작업을 마칠 수 있는지 확인하세요.

Enter / Space: 토글 상태를 바꿉니다.