Toggle

고정이나 서식 적용처럼 눌림 상태가 유지되는 버튼에 사용합니다.

미리보기

고정 버튼 상태

아이콘과 텍스트 버튼, 처음부터 눌린 버튼, 비활성 버튼을 비교합니다.

미리보기를 불러오는 중입니다.

설치

Registry를 처음 사용한다면 기본 설정과 공통 스타일 설치 을 먼저 완료하세요.

npx shadcn@latest add @neumorphism-ui/toggle

공통 base를 한 번 설치한 뒤 CLI로 필요한 컴포넌트와 의존성을 추가합니다.

Registry JSON

사용법

분명한 이름을 제공하고 defaultPressed 또는 제어 상태의 pressed를 설정하세요. 관련된 여러 옵션을 함께 다룰 때는 ToggleGroup을 사용합니다.

"use client";

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

export default function Example() {
  return <Toggle aria-label="Bold">Bold</Toggle>;
}

API 레퍼런스

눌린 선택 상태가 유지되는 독립 토글 버튼. 아이콘만 쓰면 aria-label을 제공하세요. 색뿐 아니라 inset과 테두리로 선택 상태를 표시합니다.

컴포넌트	속성	타입	기본값	설명
`Toggle`	`pressed / defaultPressed`	`boolean`	`—`	제어 상태 또는 최초 상태를 지정합니다.
`Toggle`	`size`	`"sm" \| "default" \| "lg"`	`—`	컨트롤 크기를 선택합니다.
`Toggle`	`disabled`	`boolean`	`—`	사용자 조작을 비활성화합니다.

미리보기

고정 버튼 상태

설치

사용법

API 레퍼런스

접근성