Structure
| Class | Description |
|---|---|
| .mdst-dialog | Container, applied to <dialog> element |
| .mdst-dialog-header | Header section with title and close button |
| .mdst-dialog-title | Dialog heading text |
| .mdst-dialog-close | Close button in header |
| .mdst-dialog-body | Main content area |
| .mdst-dialog-footer | Footer with action buttons |
Sizes
| Class | Example |
|---|---|
| .mdst-dialog | |
| .mdst-dialog--sm | |
| .mdst-dialog--lg | |
| .mdst-dialog--full |
Usage
<dialog id="my-dialog" class="mdst-dialog">
<div class="mdst-dialog-header">
<h2 class="mdst-dialog-title">Dialog Title</h2>
<button class="mdst-dialog-close" commandfor="my-dialog" command="close">✕</button>
</div>
<div class="mdst-dialog-body">
<p>Dialog content goes here.</p>
</div>
<div class="mdst-dialog-footer">
<button class="mdst-button mdst-button--ghost" commandfor="my-dialog" command="close">Cancel</button>
<button class="mdst-button mdst-button--inverted" commandfor="my-dialog" command="close">Confirm</button>
</div>
</dialog>
<button commandfor="my-dialog" command="show-modal">Open Dialog</button>