Skip to Content
ComponentsCalsConfirm

Confirm

확인/취소 선택이 필요한 팝업 다이얼로그입니다. Foundation AlertDialog를 기반으로 하며, backdrop 클릭으로 닫히지 않는 persistent 모달입니다.

사용법

import { Confirm } from "@vortex/ui-cals"
 
function Example() {
  const [open, setOpen] = useState(false)
 
  return (
    <>
      <button onClick={() => setOpen(true)}>삭제</button>
      <Confirm
        open={open}
        onOpenChange={setOpen}
        title="삭제 확인"
        content="이 항목을 삭제하시겠습니까?"
        onConfirm={() => console.log("삭제됨")}
        onCancel={() => console.log("취소됨")}
      />
    </>
  )
}

예제

기본 사용

커스텀 콘텐츠

children을 전달하면 content 대신 커스텀 콘텐츠가 렌더링됩니다.

<Confirm title="권한 요청" confirmText="허용" cancelText="거부">
  <ul>
    <li>파일 읽기</li>
    <li>파일 쓰기</li>
  </ul>
</Confirm>

Props

Prop타입기본값설명
openboolean-열림/닫힘 상태
onOpenChange(open: boolean) => void-상태 변경 콜백
titlestring-다이얼로그 제목
contentReactNode-본문 콘텐츠
confirmTextstring"확인"확인 버튼 텍스트
cancelTextstring"취소"취소 버튼 텍스트
onConfirm() => void-확인 클릭 콜백
onCancel() => void-취소 클릭 콜백
visiblebooleantruefalse이면 렌더링하지 않음
classNamestring-추가 CSS 클래스
childrenReactNode-커스텀 콘텐츠

접근성

  • role="alertdialog" 적용 (AlertDialog 기본)
  • aria-labelledby로 제목 연결
  • Enter 키로 확인 동작
  • Escape 키로 취소 동작
  • backdrop 클릭으로 닫히지 않음 (persistent)

관련 컴포넌트

  • Alert — 확인만 가능한 알림 다이얼로그
Last updated on
CommentButtonContextMenu