Toggle

켜짐 또는 꺼짐 상태를 가질 수 있는 2상태 버튼입니다.

examples/krds/toggle-demo.tsx

import { BookmarkIcon } from "lucide-react"

import { Toggle } from "@/components/ui/toggle"

설치

pnpm dlx shadcn@latest add https://krdscn.gwlee.kr/r/toggle.json

import { Toggle } from "@/components/ui/toggle"

<Toggle>Toggle</Toggle>

Use variant="outline" for an outline style.

examples/krds/toggle-outline.tsx

import { BoldIcon, ItalicIcon } from "lucide-react"

import { Toggle } from "@/components/ui/toggle"

examples/krds/toggle-text.tsx

import { ItalicIcon } from "lucide-react"

import { Toggle } from "@/components/ui/toggle"

size prop으로 Toggle 크기를 변경합니다.

examples/krds/toggle-sizes.tsx

import { Toggle } from "@/components/ui/toggle"

export function ToggleSizes() {

examples/krds/toggle-disabled.tsx

import { Toggle } from "@/components/ui/toggle"

export function ToggleDisabled() {

RTL 지원을 활성화하려면 RTL 설정 가이드를 참고하세요.

examples/krds/toggle-rtl.tsx

"use client"

import * as React from "react"

Radix Toggle 문서를 참고하세요.