컴포넌트
Toggle
버튼의 선택 상태를 전환합니다.
설치
pnpm dlx ply-ui add toggle공통 설치 설정을 먼저 적용합니다.
사용법
버튼 하나의 눌림 상태를 전환합니다. pressed와 onPressedChange로 제어할 수 있으며, 아이콘만 있다면 aria-label로 작업 이름을 지정합니다.
눌림 상태 제어
pressed와 onPressedChange로 눌림 상태를 연결합니다. aria-pressed는 Toggle이 관리합니다.
구현 코드
components/ui/toggle.tsx
"use client";
import type { ComponentProps } from "react";
import { Toggle as Primitive } from "@base-ui/react/toggle";
import { withClassName } from "../../lib/cx";
import "./toggle.css";
// 동작과 접근성은 Base UI가 담당합니다. 이 파일은 스타일 연결만 담당합니다.
export function Toggle({
className,
...props
}: ComponentProps<typeof Primitive>) {
return (
<Primitive {...props} className={withClassName("rbx-toggle", className)} />
);
}
components/ui/toggle.css
/* Toggle: 공통 구조는 theme.css, 컴포넌트 전용 조정은 아래에 작성합니다. */
.rbx-toggle[data-pressed] {
background: var(--rbx-color-action-soft-emphasis-background);
color: var(--rbx-color-action-soft-emphasis-foreground);
}