Modal
A floating window that covers the page to prompt the user to perform or confirm an action.
Defaults
You can create a modal by creating a dialog
element with the class modal.
Inside your modal, you can add a header, body, and footer.
The header should have the class modal-header and contain a title and,
optionally, a close button (a button with the classes button and
dismiss).
The body should have the class modal-body and contain the main
content of the modal.
The footer should have the class modal-footer and contain any action
buttons or other controls that should appear at the bottom.
<button
class="button"
x-on:click="$refs.modal1.showModal()"
>
Open Modal
</button>
<dialog x-ref="modal1" class="modal">
<header class="modal-header">
<h1>Leave Without Saving?</h1>
<button
class="button dismiss"
x-on:click="$refs.modal1.close()"
></button>
</header>
<div class="modal-body">
<p>
You have unsaved edits. What would you like to do?
</p>
</div>
<div class="modal-footer">
<button
class="button primary red"
x-on:click="$refs.modal1.close()"
>
Discard Changes
</button>
<button
class="button"
x-on:click="$refs.modal1.close()"
>
Keep Editing
</button>
</div>
</dialog>Sizes
You can control the width of a modal by adding one of the following
additional classes to the dialog element:
auto(default)smallmediumlarge
If the size is auto, the drawer will be as large as necessary to fit
its content without extending past the edge of the screen.
Below is an example of a modal with the class small.
<button
class="button"
x-on:click="$refs.modal2.showModal()"
>
Open Modal
</button>
<dialog x-ref="modal2" class="modal small">
<header class="modal-header">
<h1>Leave Without Saving?</h1>
<button
class="button dismiss"
x-on:click="$refs.modal2.close()"
></button>
</header>
<div class="modal-body">
<p class="paragraph">
Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Duis ultricies lacus sed turpis
tincidunt id. Rhoncus mattis rhoncus urna neque
viverra justo nec.
</p>
<p class="paragraph">
Pretium nibh ipsum consequat nisl vel pretium lectus
quam. Ac placerat vestibulum lectus mauris ultrices.
Elementum sagittis vitae et leo duis ut diam. Odio
facilisis mauris sit amet massa. Cras semper auctor
neque vitae tempus quam. Cursus metus aliquam eleifend
mi in. Fermentum iaculis eu non diam. Diam quam nulla
porttitor massa id neque aliquam
</p>
</div>
<div class="modal-footer">
<button
class="button primary"
x-on:click="$refs.modal2.close()"
>
Save
</button>
<button
class="button"
x-on:click="$refs.modal2.close()"
>
Cancel
</button>
</div>
</dialog>Overflow
If the content in the modal body is too long, it will automatically scroll.
<button
class="button"
x-on:click="$refs.modal3.showModal()"
>
Open Modal
</button>
<dialog x-ref="modal3" class="modal small">
<header class="modal-header">
<h1>Leave Without Saving?</h1>
<button
class="button dismiss"
x-on:click="$refs.modal3.close()"
></button>
</header>
<div class="modal-body">
<p
style="
height: 100lvh;
background-color: var(--color-brand-8);
padding: var(--space-m);
border-radius: var(--radius-m);
box-shadow: var(--shadow-m);
"
>
This is a huge box. Scroll to see the rest of it.
</p>
</div>
<div class="modal-footer">
<button
class="button primary"
x-on:click="$refs.modal3.close()"
>
Save
</button>
<button
class="button"
x-on:click="$refs.modal3.close()"
>
Cancel
</button>
</div>
</dialog>