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 cd-modal.
Inside your Modal, you can add a header, body, and footer.
The header should have the class cd-modal-header and contain a title and,
optionally, a button with the class cd-dismiss-button.
The body should have the class cd-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.
command
and commandfor
attributes on buttons.
<button
class="cd-button"
command="show-modal"
commandfor="modal-1"
>
Open Modal
</button>
<dialog
id="modal-1"
class="cd-modal"
aria-labelledby="modal-1-title"
>
<header class="cd-modal-header">
<h1 id="modal-1-title">Leave Without Saving?</h1>
<button
class="cd-dismiss-button"
command="request-close"
commandfor="modal-1"
aria-label="Close"
></button>
</header>
<div class="cd-modal-body">
<p>
You have unsaved edits. What would you like to do?
</p>
</div>
<div class="cd-modal-footer">
<button
class="cd-button cd-variant-primary cd-color-red"
command="request-close"
commandfor="modal-1"
>
Discard Changes
</button>
<button
class="cd-button"
command="request-close"
commandfor="modal-1"
>
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:
cd-size-auto(default)cd-size-smallcd-size-mediumcd-size-large
If the size is auto, the Modal will be as large as necessary to fit
its content without extending past the edge of the screen.
For fine-grained control over sizing, you can set the --cd-modal-size
CSS variable on the Modal element. The value of this variable must be
a valid size (e.g., 50vw, 20rem).
Below is an example of a Modal with the class cd-size-small.
<button
class="cd-button"
command="show-modal"
commandfor="modal-2"
>
Open Modal
</button>
<dialog
id="modal-2"
class="cd-modal cd-size-small"
aria-labelledby="modal-2-title"
>
<header class="cd-modal-header">
<h1 id="modal-2-title">Leave Without Saving?</h1>
<button
class="cd-dismiss-button"
command="request-close"
commandfor="modal-2"
aria-label="Close"
></button>
</header>
<div class="cd-modal-body">
<p class="cd-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="cd-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="cd-modal-footer">
<button
class="cd-button cd-variant-primary"
command="request-close"
commandfor="modal-2"
>
Save
</button>
<button
class="cd-button"
command="request-close"
commandfor="modal-2"
>
Cancel
</button>
</div>
</dialog>Overflow
If the content in the Modal's body is too tall, the Modal will allow you to scroll the additional content into view.
<button
class="cd-button"
command="show-modal"
commandfor="modal-3"
>
Open Modal
</button>
<dialog
id="modal-3"
class="cd-modal cd-size-small"
aria-labelledby="modal-3-title"
>
<header class="cd-modal-header">
<h1 id="modal-3-title">Leave Without Saving?</h1>
<button
class="cd-dismiss-button"
command="request-close"
commandfor="modal-3"
aria-label="Close"
></button>
</header>
<div class="cd-modal-body">
<p
style="
height: 100lvh;
background-color: var(--cd-color-brand-8);
padding: var(--cd-space-m);
border-radius: var(--cd-radius-m);
box-shadow: var(--cd-shadow-m);
"
>
This is a huge box. Scroll to see the rest of it.
</p>
</div>
<div class="cd-modal-footer">
<button
class="cd-button cd-variant-primary"
command="request-close"
commandfor="modal-3"
>
Save
</button>
<button
class="cd-button"
command="request-close"
commandfor="modal-3"
>
Cancel
</button>
</div>
</dialog>