Components
Dialog
Use when an important confirmation is needed mid-task. Provide close, Escape, click-outside, and focus return together.작업 중 중요한 확인이 필요할 때 사용합니다. 닫기, Escape, 바깥 영역 클릭, 포커스 복귀를 함께 제공합니다.
Native dialog
Live previewDYNGLE UI
Markup & behavior
<button id="open">Open dialog</button>
<dialog class="dy-dialog" id="confirm" aria-labelledby="title">
<h2 id="title">Save your changes?</h2>
<form method="dialog">
<button class="dy-button secondary" autofocus>Cancel</button>
</form>
</dialog>
<script>
const open = document.querySelector("#open");
const dialog = document.querySelector("#confirm");
open.onclick = () => dialog.showModal();
dialog.addEventListener("close", () => open.focus());
</script><button id="open">대화상자 열기</button>
<dialog class="dy-dialog" id="confirm" aria-labelledby="title">
<h2 id="title">변경 내용을 저장할까요?</h2>
<form method="dialog">
<button class="dy-button secondary" autofocus>취소</button>
</form>
</dialog>
<script>
const open = document.querySelector("#open");
const dialog = document.querySelector("#confirm");
open.onclick = () => dialog.showModal();
dialog.addEventListener("close", () => open.focus());
</script>Usage사용 가이드
Explain the outcome결과를 먼저 설명
For actions that are hard to undo, say what will happen and name the action in the button. Put initial focus on the safe choice.되돌리기 어려운 동작은 무슨 일이 일어나는지 설명하고 버튼에 행동을 적습니다. 안전한 선택에 초기 포커스를 둡니다.
Don't ask 'Are you sure?' with Yes / No; people can't tell what each answer does.'정말요?'에 예/아니요로 묻지 않습니다. 각 답이 무엇을 하는지 알 수 없습니다.
Don't interrupt for success성공 안내로 흐름을 끊지 않기
Confirm light results with a toast or an inline message, and let people keep going.가벼운 결과는 토스트나 인라인 안내로 알리고 흐름을 이어 가게 합니다.
Don't block the screen with a dialog just to say something was saved.저장되었다는 사실만 알리려고 대화상자로 화면을 막지 않습니다.