COMPONENTS

Modal

현재 흐름에서 확인이나 입력을 수행하고 이전 포커스로 돌아갑니다.

미리보기

문서 플랫폼을 확인하는 중…

완료와 닫기의 의미를 구분하세요.

confirm은 확인 이벤트만 전달합니다. 작업 완료 후 닫기는 소비 코드에서 결정합니다. 취소는 cancel → 닫힘 상태 변경 → close 순서로 처리하며, 닫은 뒤에는 이전 포커스로 돌아갑니다.

confirm은 확인 요청을 전달합니다. 성공 후 소비자가 열림 값을 바꾸고 취소·닫기 요청에도 외부 열림 상태를 반영합니다.

권장

저장 폼에서는 입력 md와 푸터 버튼 lg를 함께 사용합니다.

피하기

비동기 저장을 시작하자마자 성공으로 간주해 모달을 닫지 않습니다.

관련 선택 기준·배치 사례 보기 →

Modal·Toast·하단 CTA의 겹침 규칙을 함께 확인하세요.

기본 사용법

컴포넌트의 기본 연결 예제입니다. 위 미리보기에서 변경한 설정과 입력값은 이 코드에 반영되지 않습니다.

문서 플랫폼을 확인하는 중…

구조

문서 플랫폼을 확인하는 중…

상태·크기

문서 플랫폼을 확인하는 중…

API

문서 플랫폼을 확인하는 중…

접근성·플랫폼 차이

접근성 공통 가이드에서 키보드·포커스·이름·글자 확대와 적용 프로젝트의 책임을 확인하세요.

Vue value·input과 React·Native open·onOpenChange를 사용합니다. 웹은 포커스 제한·복귀, Native는 Modal·뒤로 가기를 처리하며 HTML 폼 제출은 별도로 연결합니다.

문서 플랫폼을 확인하는 중…

KJUN UI · v0.3.0Small apps. Thoughtfully made.