Toggle

@hua-labs/ui

v1.0.0

눌림 상태를 가지는 토글 버튼 컴포넌트입니다. Switch와 달리 버튼 형태로 표시됩니다.

설치

bash

npm install @hua-labs/hua

Import

tsx

import { Toggle } from "@hua-labs/hua";

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

기본 사용법

tsx

<Toggle label="Notifications" />
<Toggle label="Favorite" icon={<Star />} />
<Toggle icon={<Heart />} />

제어 모드

상태: OFF

tsx

const [pressed, setPressed] = useState(false);

<Toggle
  pressed={pressed}
  onPressedChange={setPressed}
  label="Dark Mode"
  icon={pressed ? <Moon /> : <Sun />}
/>

변형

tsx

<Toggle variant="default" label="Default" />
<Toggle variant="outline" label="Outline" />
<Toggle variant="filled" label="Filled" />
<Toggle variant="ghost" label="Ghost" />

크기

tsx

<Toggle size="sm" label="Small" />
<Toggle size="md" label="Medium" />
<Toggle size="lg" label="Large" />

설명 포함

새로운 소식을 이메일로 받습니다

tsx

<Toggle
  label="Receive Notifications"
  description="Get updates via email"
  icon={<Bell />}
/>

Props

이름	타입	기본값	설명
`variant`	`"default" \| "outline" \| "filled" \| "ghost" \| "glass"`	`"default"`	Toggle button style variant
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Toggle button size
`pressed`	`boolean`	-	Controlled pressed state
`onPressedChange`	`(pressed: boolean) => void`	-	Callback when pressed state changes
`label`	`string`	-	Toggle label text
`description`	`string`	-	Toggle description text
`icon`	`React.ReactNode`	-	Icon element to display
`iconPosition`	`"left" \| "right"`	`"left"`	Icon position relative to label

접근성

•키보드 지원: Space 또는 Enter 키로 토글
•aria-pressed: 눌림 상태를 보조 기술에 전달
•포커스 시 시각적 표시: 키보드 탐색을 위한 명확한 포커스 링 표시

Action Link