Alert dialog - Vapor UI

Anatomy

#	Element	Description
1	Title	Alert dialog가 실행할 작업을 설명합니다. aria-labelledby을 통해 Alert dialog의 레이블이 지정됩니다.
2	Description	Alert dialog 실행 이후 발생할 결과를 설명합니다. aria-describedby을 통해 Alert dialog와 연결됩니다.
3	Content (optional)	작업 내용과 관련된 콘텐츠로 구성됩니다. 가장 핵심이 되는 정보를 제공해야 할 때 선택적으로 사용합니다.
4	Cancel button	Alert dialog가 실행할 작업을 취소하는 버튼입니다. Alert dialog를 닫는 기능을 합니다.
5	Action button	Alert dialog를 실행하는 버튼입니다. type=critical은 danger 버튼을 사용하고, type=confirm은 primary 버튼을 사용합니다.
6	Header	Title과 Description이 포함되어 있습니다.
7	Body (optional)	Content가 포함되어 있습니다. Content가 없을 경우 사용하지 않습니다.
8	Footer	Action button과 Cancel button이 포함되어 있습니다.
9	Backdrop	페이지와 상호작용을 차단하는 Overlay입니다. 클릭해도 Alert dialog가 닫히지 않습니다.

삭제, 초기화, 탈퇴처럼 사용자가 직접 작업한 결과물이 사라지고 데이터를 복구할 수 없는 작업 전에 사용하세요. 실수를 막기 위해 강한 경고가 필요할 때 사용합니다.

사용자가 결정한 작업을 실행하기 전 확인을 요청할 때 사용합니다. 실행하면 상태는 바뀌지만 큰 손실이 없거나 복구할 방법이 있는 상황에 사용합니다.

Alert dialog에서 실행한 작업이 완료되면 Toast로 결과를 알리세요. 사용자는 이미 다이얼로그에서 결정을 내렸으므로 결과는 화면 흐름을 방해하지 않도록 간결하게 전달합니다.

Alert dialog와 Dialog는 시각적으로 유사하지만, 접근성과 동작이 다르기에 명확히 구분해서 사용해야 합니다.

구분	Alert dialog	Dialog
목적	사용자 결정 확인, 되돌릴 수 없는 작업에 대한 확인	폼 입력, 정보 조회, 특정 입력 값을 받아야 할 경우
Close behaivor	Footer에서 Cancel button으로 제공	Hearder의 Close button Backdrop 클릭 / ESC 키
사이즈	단일 사이즈	md / lg / xl

너무 잦은 Dialog 사용은 사용자의 주의를 분산시키고 반사적으로 Dialog를 닫는 행동으로 이어질 수 있습니다. 사용자의 결정이 프로세스에 영향을 주지 않거나, 중요도가 낮은 정보라면 비모달(Non-dialog) 컴포넌트를 사용하세요.

Alert dialog popup의 최대 높이(Max-height)는 전체 화면 높이의 80%로 설정됩니다. 최대 높이를 넘을 경우 Content 영역에 스크롤이 발생합니다.

Alert dialog는 Footer의 Cancel 버튼으로만 닫을 수 있습니다.