Toggle

켜기/끄기 상태를 전환하는 토글 버튼

Basic Usage

클릭하여 상태를 전환하는 토글 버튼입니다.

tsx

<Toggle aria-label="Toggle bold">
  <Bold className="size-4" />
</Toggle>

Variants

두 가지 variant를 제공합니다.

tsx

<Toggle variant="default" aria-label="Toggle default">
  <Bold className="size-4" />
</Toggle>
<Toggle variant="outline" aria-label="Toggle outline">
  <Italic className="size-4" />
</Toggle>

Sizes

세 가지 크기를 제공합니다.

tsx

<Toggle size="sm" aria-label="Toggle small">
  <Bold className="size-4" />
</Toggle>
<Toggle size="default" aria-label="Toggle default">
  <Bold className="size-4" />
</Toggle>
<Toggle size="lg" aria-label="Toggle large">
  <Bold className="size-4" />
</Toggle>

With Text

아이콘과 텍스트를 함께 사용할 수 있습니다.

tsx

<Toggle aria-label="Toggle italic">
  <Italic className="size-4" />
  Italic
</Toggle>

Disabled

비활성화 상태의 토글입니다.

tsx

<Toggle disabled aria-label="Toggle disabled">
  <Underline className="size-4" />
</Toggle>

Usage

tsx

import { Toggle } from '@gpters-internal/ui';
import { Bold } from 'lucide-react';

function Example() {
  return (
    <Toggle
      aria-label="Toggle bold"
      onPressedChange={(pressed) => console.log(pressed)}
    >
      <Bold className="size-4" />
    </Toggle>
  );
}