Dependencies
This component uses the following to create the full UI.
JS:This component *needs* javascript to be enabled and to load correctly to work.
Basic Example
A typical "boxed" modal, using Alpine JS to toggle state between in-active and active. Includes adjusting aria attributes for accessibility.
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" @click="modalOpen = true" type="button">Open Box</button>
<!-- Modal -->
<div class="c-modal c-modal--box" role="dialog" aria-modal="true" style="display: none"
x-show="modalOpen"
x-id="['modal-title']"
x-on:keydown.escape.prevent.stop="modalOpen = false"
:aria-labelledby="$id('modal-title')"
>
<div class="c-modal__overlay"
x-show="modalOpen"
x-transition.opacity
@click="modalOpen = false"
></div>
<div class="c-modal__body"
x-show="modalOpen"
x-transition.duration.300
x-on:click.stop
x-trap.noautofocus.noscroll.inert="modalOpen"
>
<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>Box modal sizes
Box modal sizes can be adjusted with a few modifiers.
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.
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" @click="modalOpen = true" type="button">Open Box</button>
<!-- Modal -->
<div class="c-modal c-modal--box" role="dialog" aria-modal="true" style="display: none"
x-show="modalOpen"
x-id="['modal-title']"
x-on:keydown.escape.prevent.stop="modalOpen = false"
:aria-labelledby="$id('modal-title')"
>
<div class="c-modal__overlay"
x-show="modalOpen"
x-transition.opacity
@click="modalOpen = false"
></div>
<div class="c-modal__body"
x-show="modalOpen"
x-transition.duration.300
x-on:click.stop
x-trap.noautofocus.noscroll.inert="modalOpen"
>
<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 Box</button>
<!-- Modal -->
<div class="c-modal c-modal--box c-modal--box-md" role="dialog" aria-modal="true" style="display: none"
x-show="modalOpen"
x-id="['modal-title']"
x-on:keydown.escape.prevent.stop="modalOpen = false"
:aria-labelledby="$id('modal-title')"
>
<div class="c-modal__overlay"
x-show="modalOpen"
x-transition.opacity
@click="modalOpen = false"
></div>
<div class="c-modal__body"
x-show="modalOpen"
x-transition.duration.300
x-on:click.stop
x-trap.noautofocus.noscroll.inert="modalOpen"
>
<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 Box</button>
<!-- Modal -->
<div class="c-modal c-modal--box c-modal--box-lg" role="dialog" aria-modal="true" style="display: none"
x-show="modalOpen"
x-id="['modal-title']"
x-on:keydown.escape.prevent.stop="modalOpen = false"
:aria-labelledby="$id('modal-title')"
>
<div class="c-modal__overlay"
x-show="modalOpen"
x-transition.opacity
@click="modalOpen = false"
></div>
<div class="c-modal__body"
x-show="modalOpen"
x-transition.duration.300
x-on:click.stop
x-trap..noautofocus.noscroll.inert="modalOpen"
>
<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>Body elements
Layout options for the box modal include a bordered header and footer.
Title
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequuntur, ullam. Natus assumenda sint dicta! Quos eveniet voluptatem vel, consectetur hic ullam error accusantium, quod necessitatibus fugit ducimus quae nemo quisquam.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis quos harum excepturi iste, dolore adipisci aliquid soluta
Title
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequuntur, ullam. Natus assumenda sint dicta! Quos eveniet voluptatem vel, consectetur hic ullam error accusantium, quod necessitatibus fugit ducimus quae nemo quisquam.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis quos harum excepturi iste, dolore adipisci aliquid soluta
Title
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequuntur, ullam. Natus assumenda sint dicta! Quos eveniet voluptatem vel, consectetur hic ullam error accusantium, quod necessitatibus fugit ducimus quae nemo quisquam.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis quos harum excepturi iste, dolore adipisci aliquid soluta
<div x-data="{ modalOpen : false }">
<!-- Trigger -->
<button class="c-btn" @click="modalOpen = true" type="button">Open Box</button>
<!-- Modal -->
<div class="c-modal c-modal--box" role="dialog" aria-modal="true" style="display: none"
x-show="modalOpen"
x-id="['modal-title']"
x-on:keydown.escape.prevent.stop="modalOpen = false"
:aria-labelledby="$id('modal-title')"
>
<div class="c-modal__overlay"
x-show="modalOpen"
x-transition.opacity
@click="modalOpen = false"
></div>
<div class="c-modal__body"
x-show="modalOpen"
x-transition.duration.300
x-on:click.stop
x-trap.noautofocus.noscroll.inert="modalOpen"
>
<div class="c-modal__body-header | o-flow">
<h2 class="u-heading u-gamma u-fw-500" :id="$id('modal-title')">Title</h2>
</div>
<div class="c-modal__body-content | o-flow">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequuntur, ullam. Natus assumenda sint dicta! Quos eveniet voluptatem vel, consectetur hic ullam error accusantium, quod necessitatibus fugit ducimus quae nemo quisquam.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis quos harum excepturi iste, dolore adipisci aliquid soluta</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 Box</button>
<!-- Modal -->
<div class="c-modal c-modal--box" role="dialog" aria-modal="true" style="display: none"
x-show="modalOpen"
x-id="['modal-title']"
x-on:keydown.escape.prevent.stop="modalOpen = false"
:aria-labelledby="$id('modal-title')"
>
<div class="c-modal__overlay"
x-show="modalOpen"
x-transition.opacity
@click="modalOpen = false"
></div>
<div class="c-modal__body"
x-show="modalOpen"
x-transition.duration.300
x-on:click.stop
x-trap.noautofocus.noscroll.inert="modalOpen"
>
<div class="c-modal__body-content | o-flow">
<h2 class="u-heading u-gamma u-fw-500" :id="$id('modal-title')">Title</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequuntur, ullam. Natus assumenda sint dicta! Quos eveniet voluptatem vel, consectetur hic ullam error accusantium, quod necessitatibus fugit ducimus quae nemo quisquam.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis quos harum excepturi iste, dolore adipisci aliquid soluta</p>
</div>
<div class="c-modal__body-footer | 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 x-data="{ modalOpen : false }">
<!-- Trigger -->
<button class="c-btn" @click="modalOpen = true" type="button">Open Box</button>
<!-- Modal -->
<div class="c-modal c-modal--box" role="dialog" aria-modal="true" style="display: none"
x-show="modalOpen"
x-id="['modal-title']"
x-on:keydown.escape.prevent.stop="modalOpen = false"
:aria-labelledby="$id('modal-title')"
>
<div class="c-modal__overlay"
x-show="modalOpen"
x-transition.opacity
@click="modalOpen = false"
></div>
<div class="c-modal__body"
x-show="modalOpen"
x-transition.duration.300
x-on:click.stop
x-trap.noautofocus.noscroll.inert="modalOpen"
>
<div class="c-modal__body-header">
<h2 class="u-heading u-gamma u-fw-500" :id="$id('modal-title')">Title</h2>
</div>
<div class="c-modal__body-content | o-flow">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequuntur, ullam. Natus assumenda sint dicta! Quos eveniet voluptatem vel, consectetur hic ullam error accusantium, quod necessitatibus fugit ducimus quae nemo quisquam.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis quos harum excepturi iste, dolore adipisci aliquid soluta</p>
</div>
<div class="c-modal__body-footer | 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>Managing overflow
When space is limited i.e on a mobile device, ensure the content is scroll-able within the modal.
Title
Did you hear that? They've shut down the main reactor. We'll be destroyed for sure. This is madness! We're doomed! There'll be no escape for the Princess this time. What's that? Artoo! Artoo-Detoo, where are you? At last! Where have you been? They're heading in this direction.
We have no weapons. You can't possibly. You would prefer another target? A military target? Then name the system! I grow tired of asking this. So it'll be the last time.
We're going in full throttle. Right with you, boss. Luke, at that speed will you be able to pull out in time? It'll be just like Beggar's Canyon back home. We'll stay back far enough to cover you.
Title
Did you hear that? They've shut down the main reactor. We'll be destroyed for sure. This is madness! We're doomed! There'll be no escape for the Princess this time. What's that? Artoo! Artoo-Detoo, where are you? At last! Where have you been? They're heading in this direction.
We have no weapons. You can't possibly. You would prefer another target? A military target? Then name the system! I grow tired of asking this. So it'll be the last time.
We're going in full throttle. Right with you, boss. Luke, at that speed will you be able to pull out in time? It'll be just like Beggar's Canyon back home. We'll stay back far enough to cover you.
Title
Did you hear that? They've shut down the main reactor. We'll be destroyed for sure. This is madness! We're doomed! There'll be no escape for the Princess this time. What's that? Artoo! Artoo-Detoo, where are you? At last! Where have you been? They're heading in this direction.
We have no weapons. You can't possibly. You would prefer another target? A military target? Then name the system! I grow tired of asking this. So it'll be the last time.
We're going in full throttle. Right with you, boss. Luke, at that speed will you be able to pull out in time? It'll be just like Beggar's Canyon back home. We'll stay back far enough to cover you.
Title
Did you hear that? They've shut down the main reactor. We'll be destroyed for sure. This is madness! We're doomed! There'll be no escape for the Princess this time. What's that? Artoo! Artoo-Detoo, where are you? At last! Where have you been? They're heading in this direction.
We have no weapons. You can't possibly. You would prefer another target? A military target? Then name the system! I grow tired of asking this. So it'll be the last time.
We're going in full throttle. Right with you, boss. Luke, at that speed will you be able to pull out in time? It'll be just like Beggar's Canyon back home. We'll stay back far enough to cover you.
<div x-data="{ modalOpen : false }">
<!-- Trigger -->
<button class="c-btn" @click="modalOpen = true" type="button">Open Box</button>
<!-- Modal -->
<div class="c-modal c-modal--box" role="dialog" aria-modal="true" style="display: none"
x-show="modalOpen"
x-id="['modal-title']"
x-on:keydown.escape.prevent.stop="modalOpen = false"
:aria-labelledby="$id('modal-title')"
>
<div class="c-modal__overlay"
x-show="modalOpen"
x-transition.opacity
@click="modalOpen = false"
></div>
<div class="c-modal__body"
x-show="modalOpen"
x-transition.duration.300
x-on:click.stop
x-trap.noautofocus.noscroll.inert="modalOpen"
>
<div class="c-modal__body-content | o-flow | u-h-24">
<h2 class="u-heading u-gamma u-fw-500" :id="$id('modal-title')">Title</h2>
<p>Did you hear that? They've shut down the main reactor. We'll be destroyed for sure. This is madness! We're doomed! There'll be no escape for the Princess this time. What's that? Artoo! Artoo-Detoo, where are you? At last! Where have you been? They're heading in this direction.</p>
<p>We have no weapons. You can't possibly. You would prefer another target? A military target? Then name the system! I grow tired of asking this. So it'll be the last time.</p>
<p>We're going in full throttle. Right with you, boss. Luke, at that speed will you be able to pull out in time? It'll be just like Beggar's Canyon back home. We'll stay back far enough to cover you.</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 Box</button>
<!-- Modal -->
<div class="c-modal c-modal--box" role="dialog" aria-modal="true" style="display: none"
x-show="modalOpen"
x-id="['modal-title']"
x-on:keydown.escape.prevent.stop="modalOpen = false"
:aria-labelledby="$id('modal-title')"
>
<div class="c-modal__overlay"
x-show="modalOpen"
x-transition.opacity
@click="modalOpen = false"
></div>
<div class="c-modal__body"
x-show="modalOpen"
x-transition.duration.300
x-on:click.stop
x-trap.noautofocus.noscroll.inert="modalOpen"
>
<div class="c-modal__body-header">
<h2 class="u-heading u-gamma u-fw-500" :id="$id('modal-title')">Title</h2>
</div>
<div class="c-modal__body-content | o-flow | u-h-20">
<p>Did you hear that? They've shut down the main reactor. We'll be destroyed for sure. This is madness! We're doomed! There'll be no escape for the Princess this time. What's that? Artoo! Artoo-Detoo, where are you? At last! Where have you been? They're heading in this direction.</p>
<p>We have no weapons. You can't possibly. You would prefer another target? A military target? Then name the system! I grow tired of asking this. So it'll be the last time.</p>
<p>We're going in full throttle. Right with you, boss. Luke, at that speed will you be able to pull out in time? It'll be just like Beggar's Canyon back home. We'll stay back far enough to cover you.</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 Box</button>
<!-- Modal -->
<div class="c-modal c-modal--box" role="dialog" aria-modal="true" style="display: none"
x-show="modalOpen"
x-id="['modal-title']"
x-on:keydown.escape.prevent.stop="modalOpen = false"
:aria-labelledby="$id('modal-title')"
>
<div class="c-modal__overlay"
x-show="modalOpen"
x-transition.opacity
@click="modalOpen = false"
></div>
<div class="c-modal__body"
x-show="modalOpen"
x-transition.duration.300
x-on:click.stop
x-trap.noautofocus.noscroll.inert="modalOpen"
>
<div class="c-modal__body-content | o-flow | u-h-20">
<h2 class="u-heading u-gamma u-fw-500" :id="$id('modal-title')">Title</h2>
<p>Did you hear that? They've shut down the main reactor. We'll be destroyed for sure. This is madness! We're doomed! There'll be no escape for the Princess this time. What's that? Artoo! Artoo-Detoo, where are you? At last! Where have you been? They're heading in this direction.</p>
<p>We have no weapons. You can't possibly. You would prefer another target? A military target? Then name the system! I grow tired of asking this. So it'll be the last time.</p>
<p>We're going in full throttle. Right with you, boss. Luke, at that speed will you be able to pull out in time? It'll be just like Beggar's Canyon back home. We'll stay back far enough to cover you.</p>
</div>
<div class="c-modal__body-footer | 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 x-data="{ modalOpen : false }">
<!-- Trigger -->
<button class="c-btn" @click="modalOpen = true" type="button">Open Box</button>
<!-- Modal -->
<div class="c-modal c-modal--box" role="dialog" aria-modal="true" style="display: none"
x-show="modalOpen"
x-id="['modal-title']"
x-on:keydown.escape.prevent.stop="modalOpen = false"
:aria-labelledby="$id('modal-title')"
>
<div class="c-modal__overlay"
x-show="modalOpen"
x-transition.opacity
@click="modalOpen = false"
></div>
<div class="c-modal__body"
x-show="modalOpen"
x-transition.duration.300
x-on:click.stop
x-trap.noautofocus.noscroll.inert="modalOpen"
>
<div class="c-modal__body-header">
<h2 class="u-heading u-gamma u-fw-500" :id="$id('modal-title')">Title</h2>
</div>
<div class="c-modal__body-content | o-flow | u-h-20">
<p>Did you hear that? They've shut down the main reactor. We'll be destroyed for sure. This is madness! We're doomed! There'll be no escape for the Princess this time. What's that? Artoo! Artoo-Detoo, where are you? At last! Where have you been? They're heading in this direction.</p>
<p>We have no weapons. You can't possibly. You would prefer another target? A military target? Then name the system! I grow tired of asking this. So it'll be the last time.</p>
<p>We're going in full throttle. Right with you, boss. Luke, at that speed will you be able to pull out in time? It'll be just like Beggar's Canyon back home. We'll stay back far enough to cover you.</p>
</div>
<div class="c-modal__body-footer | 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> Notes:
Add the Alpine.js .noautofocus modifier to the x-trap attribute to stop auto focus on the first element that is focusable. This is handy for situations where there is a button situated at the bottom of the scrollable content.
alpinejs.dev x-trap
Close
Allow the dialog element to be closed with a "X" button.
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" @click="modalOpen = true" type="button">Open Box</button>
<!-- Modal -->
<div class="c-modal c-modal--box" role="dialog" aria-modal="true" style="display: none"
x-show="modalOpen"
x-id="['modal-title']"
x-on:keydown.escape.prevent.stop="modalOpen = false"
:aria-labelledby="$id('modal-title')"
>
<div class="c-modal__overlay"
x-show="modalOpen"
x-transition.opacity
@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"
x-transition.duration.300
x-on:click.stop
x-trap.noautofocus.noscroll.inert="modalOpen"
>
<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 Box</button>
<!-- Modal -->
<div class="c-modal c-modal--box" role="dialog" aria-modal="true" style="display: none"
x-show="modalOpen"
x-id="['modal-title']"
x-on:keydown.escape.prevent.stop="modalOpen = false"
:aria-labelledby="$id('modal-title')"
>
<div class="c-modal__overlay"
x-show="modalOpen"
x-transition.opacity
@click="modalOpen = false"
></div>
<div class="c-modal__body"
x-show="modalOpen"
x-transition.duration.300
x-on:click.stop
x-trap.noautofocus.noscroll.inert="modalOpen"
>
<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>