Basic Example
Full width drawer for larger pieces of UI and content.
Title
Your negotiations seem to have failed, Ambassador. The negotiations never took place. It's urgent that we make contact with the republic. They've knocked out all our communications.
<div x-data="{ modalOpen: false }">
<!-- Trigger -->
<button
class="c-btn" type="button"
@click="modalOpen = true"
>
Open Drawer
</button>
<!-- Modal -->
<div class="c-modal c-modal--drawer c-modal--top" role="dialog"
aria-modal="true"
style="display: none;"
x-show="modalOpen"
x-id="['modal-title']"
@click.keydown.escape.prevent.stop="modalOpen = false"
:aria-labelledby="$id('modal-title')"
>
<div class="c-modal__overlay"
x-show="modalOpen"
x-transition.opacity.duration.400
@click="modalOpen = false"
></div>
<div class="c-modal__body"
x-show="modalOpen"
@click.outside="modalOpen = false"
x-trap.noautofocus.noscroll.inert="modalOpen"
x-transition:enter="u-transition"
x-transition:enter-start="u-translate-y-n100%"
x-transition:enter-end="u-translate-y-0"
x-transition:leave="u-transition"
x-transition:leave-start="u-translate-y-0"
x-transition:leave-end="u-translate-y-n100%"
>
<div class="c-modal__body-content | o-flow">
<h2 class="u-heading u-gamma u-fw-500" :id="$id('modal-title')">Title</h2>
<p>Your negotiations seem to have failed, Ambassador. The negotiations never took place. It's urgent that we make contact with the republic. They've knocked out all our communications.</p>
<div class="u-space-x-xs">
<button class="c-btn c-btn--primary" type="button" @click="modalOpen = false">Confirm</button>
<button class="c-btn c-btn--tertiary" type="button" @click="modalOpen = false">Cancel</button>
</div>
</div>
</div>
</div>
</div>Alignment
Align the drawer modal either top or bottom of the viewport.
Title
Your negotiations seem to have failed, Ambassador. The negotiations never took place. It's urgent that we make contact with the republic. They've knocked out all our communications.
Title
Your negotiations seem to have failed, Ambassador. The negotiations never took place. It's urgent that we make contact with the republic. They've knocked out all our communications.
<div x-data="{ modalOpen: false }">
<!-- Trigger -->
<button
class="c-btn" type="button"
@click="modalOpen = true"
>
Open Drawer
</button>
<!-- Modal -->
<div class="c-modal c-modal--drawer c-modal--top" role="dialog"
aria-modal="true"
style="display: none;"
x-show="modalOpen"
x-id="['modal-title']"
@click.keydown.escape.prevent.stop="modalOpen = false"
:aria-labelledby="$id('modal-title')"
>
<div class="c-modal__overlay"
x-show="modalOpen"
x-transition.opacity.duration.400
@click="modalOpen = false"
></div>
<div class="c-modal__body"
x-show="modalOpen"
@click.outside="modalOpen = false"
x-trap.noautofocus.noscroll.inert="modalOpen"
x-transition:enter="u-transition"
x-transition:enter-start="u-translate-y-n100%"
x-transition:enter-end="u-translate-y-0"
x-transition:leave="u-transition"
x-transition:leave-start="u-translate-y-0"
x-transition:leave-end="u-translate-y-n100%"
>
<div class="c-modal__body-content | o-flow">
<h2 class="u-heading u-gamma u-fw-500" :id="$id('modal-title')">Title</h2>
<p>Your negotiations seem to have failed, Ambassador. The negotiations never took place. It's urgent that we make contact with the republic. They've knocked out all our communications.</p>
<div class="u-space-x-xs">
<button class="c-btn c-btn--primary" type="button" @click="modalOpen = false">Confirm</button>
<button class="c-btn c-btn--tertiary" type="button" @click="modalOpen = false">Cancel</button>
</div>
</div>
</div>
</div>
</div><div x-data="{ modalOpen: false }">
<!-- Trigger -->
<button class="c-btn" @click="modalOpen = true" type="button">Open Drawer</button>
<!-- Modal -->
<div class="c-modal c-modal--drawer c-modal--btm" role="dialog" aria-modal="true" style="display: none;"
x-show="modalOpen"
x-id="['modal-title']"
@click.keydown.escape.prevent.stop="modalOpen = false"
:aria-labelledby="$id('modal-title')"
>
<div class="c-modal__overlay"
x-show="modalOpen"
x-transition.opacity.duration.400
@click="modalOpen = false"
></div>
<div class="c-modal__body"
x-show="modalOpen"
@click.outside="modalOpen = false"
x-trap.noautofocus.noscroll.inert="modalOpen"
x-transition:enter="u-transition"
x-transition:enter-start="u-translate-y-100%"
x-transition:enter-end="u-translate-y-0"
x-transition:leave="u-transition"
x-transition:leave-start="u-translate-y-0"
x-transition:leave-end="u-translate-y-100%"
>
<div class="c-modal__body-content | o-flow">
<h2 class="u-heading u-gamma u-fw-500" :id="$id('modal-title')">Title</h2>
<p>Your negotiations seem to have failed, Ambassador. The negotiations never took place. It's urgent that we make contact with the republic. They've knocked out all our communications.</p>
<div class="u-space-x-xs">
<button class="c-btn c-btn--primary" type="button" @click="modalOpen = false">Confirm</button>
<button class="c-btn c-btn--tertiary" type="button" @click="modalOpen = false">Cancel</button>
</div>
</div>
</div>
</div>
</div>Close
Add a close button outside or inside the modal "body".
Title
Your negotiations seem to have failed, Ambassador. The negotiations never took place. It's urgent that we make contact with the republic. They've knocked out all our communications.
Title
Your negotiations seem to have failed, Ambassador. The negotiations never took place. It's urgent that we make contact with the republic. They've knocked out all our communications.
<div x-data="{ modalOpen: false }">
<!-- Trigger -->
<button
class="c-btn" type="button"
@click="modalOpen = true"
>
Open Drawer
</button>
<!-- Modal -->
<div class="c-modal c-modal--drawer c-modal--top" role="dialog"
aria-modal="true"
style="display: none;"
x-show="modalOpen"
x-id="['modal-title']"
@click.keydown.escape.prevent.stop="modalOpen = false"
:aria-labelledby="$id('modal-title')"
>
<div class="c-modal__overlay"
x-show="modalOpen"
x-transition.opacity.duration.400
@click="modalOpen = false"
></div>
<div class="c-modal__close">
<button class="c-btn c-btn--clear" type="button" @click="modalOpen = false">
<span class="u-hidden">Close Dialog</span>
<svg class="c-icon c-icon--lg" viewbox="0 0 24 24" width="16" height="16" aria-hidden="true">
<path fill="none" stroke-linecap="round" stroke-width="2" d="m6 6 12 12M6 18 18 6"/>
</svg>
</button>
</div>
<div class="c-modal__body"
x-show="modalOpen"
@click.outside="modalOpen = false"
x-trap.noautofocus.noscroll.inert="modalOpen"
x-transition:enter="u-transition"
x-transition:enter-start="u-translate-y-n100%"
x-transition:enter-end="u-translate-y-0"
x-transition:leave="u-transition"
x-transition:leave-start="u-translate-y-0"
x-transition:leave-end="u-translate-y-n100%"
>
<div class="c-modal__body-content | o-flow">
<h2 class="u-heading u-gamma u-fw-500" :id="$id('modal-title')">Title</h2>
<p>Your negotiations seem to have failed, Ambassador. The negotiations never took place. It's urgent that we make contact with the republic. They've knocked out all our communications.</p>
<div class="u-space-x-xs">
<button class="c-btn c-btn--primary" type="button" @click="modalOpen = false">Confirm</button>
<button class="c-btn c-btn--tertiary" type="button" @click="modalOpen = false">Cancel</button>
</div>
</div>
</div>
</div>
</div><div x-data="{ modalOpen: false }">
<!-- Trigger -->
<button
class="c-btn" type="button"
@click="modalOpen = true"
>
Open Drawer
</button>
<!-- Modal -->
<div class="c-modal c-modal--drawer c-modal--top" role="dialog"
aria-modal="true"
style="display: none;"
x-show="modalOpen"
x-id="['modal-title']"
@click.keydown.escape.prevent.stop="modalOpen = false"
:aria-labelledby="$id('modal-title')"
>
<div class="c-modal__overlay"
x-show="modalOpen"
x-transition.opacity.duration.400
@click="modalOpen = false"
></div>
<div class="c-modal__body"
x-show="modalOpen"
@click.outside="modalOpen = false"
x-trap.noautofocus.noscroll.inert="modalOpen"
x-transition:enter="u-transition"
x-transition:enter-start="u-translate-y-n100%"
x-transition:enter-end="u-translate-y-0"
x-transition:leave="u-transition"
x-transition:leave-start="u-translate-y-0"
x-transition:leave-end="u-translate-y-n100%"
>
<div class="c-modal__body-close">
<button class="c-btn c-btn--clear" type="button"
@click="modalOpen = false"
>
<span class="u-hidden">Close Dialog</span>
<svg class="c-icon" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-width="1.5" d="m4 4 8 8m-8 0 8-8"/>
</svg>
</button>
</div>
<div class="c-modal__body-content | o-flow">
<h2 class="u-heading u-gamma u-fw-500" :id="$id('modal-title')">Title</h2>
<p>Your negotiations seem to have failed, Ambassador. The negotiations never took place. It's urgent that we make contact with the republic. They've knocked out all our communications.</p>
<div class="u-space-x-xs">
<button class="c-btn c-btn--primary" type="button" @click="modalOpen = false">Confirm</button>
<button class="c-btn c-btn--tertiary" type="button" @click="modalOpen = false">Cancel</button>
</div>
</div>
</div>
</div>
</div>