Layout
Dialog
semantic HTML집중이 필요한 작업을 페이지 위에 표시합니다.
Live example
<button type="button" data-example-action="open-dialog">Open dialog</button><dialog data-standard-component="dialog"><span data-slot="title">Delete project?</span><p>This action moves the project to trash.</p><button data-slot="footer" type="button" class="secondary" data-example-action="close-dialog">Cancel</button><button data-slot="footer" type="button">Move to trash</button></dialog>Variants and sizes
The pattern inherits theme and density tokens. Use compact, comfortable, or roomy density when the surrounding screen requires it.
compactcomfortableroomy
Public API
| Contract | Value |
|---|---|
| Implementation | semantic HTML |
| Status | stable |
| License | free |
| Since | 0.2 |
| HTML contract | Native HTML elements and attributes |
| Events | Native browser events |
Accessibility
명확한 label 또는 title을 제공하고 modal 내부 초기 포커스와 종료 후 트리거 포커스 복귀를 유지합니다.
Server template guidance
<!-- Render the semantic HTML on the server. Load enhancement JavaScript only when this interaction is needed. -->