Modals are windows used for displaying prompts and subtasks without losing context of the parent application.
Modals are composed of several parts. To render a modal, include a modal backdrop, modal header, modal body, and modal footer (optional).
Modal content
<div class="a-modal__backdrop">
<div class="a-modal">
<div class="a-modal__header">
<h3 class="a-modal__title">Modal Title</h3>
<button class="a-modal__close"></button>
</div>
<div class="a-modal__content">
<p class="-text -m0">Modal content</p>
</div>
<div class="a-modal__footer">
<button class="a-btn">Cancel</button>
<button class="a-btn -primary -ml2">Save</button>
</div>
</div>
</div>
Invert a modals backdrop by applying the class -inverse
.
Modal content
<div class="a-modal__backdrop -inverse">
<div class="a-modal">
<div class="a-modal__header">
<h3 class="a-modal__title">Modal Title</h3>
<button class="a-modal__close"></button>
</div>
<div class="a-modal__content">
<p class="-text -m0">Modal content</p>
</div>
<div class="a-modal__footer">
<button class="a-btn">Cancel</button>
<button class="a-btn -primary -ml2">Save</button>
</div>
</div>
</div>
Disable header or footer borders by applying the class -noBorder
to
a-modal__header
or a-modal__footer
.
Modal content
<div class="a-modal__backdrop">
<div class="a-modal">
<div class="a-modal__header -noBorder">
<h3 class="a-modal__title">Modal Title</h3>
<button class="a-modal__close"></button>
</div>
<div class="a-modal__content">
<p class="-text -m0">Modal content</p>
</div>
<div class="a-modal__footer -noBorder">
<button class="a-btn">Cancel</button>
<button class="a-btn -primary -ml2">Save</button>
</div>
</div>
</div>
For multi-step modals, ensure the class -centered
is applied
to a-modal__title
. This will provide sufficient real estate on the
left side to store a back button a-modal__back
.
Modal content
<div class="a-modal__backdrop">
<div class="a-modal">
<div class="a-modal__header">
<h3 class="a-modal__title -centered">Modal Title</h3>
<button class="a-modal__back"></button>
<button class="a-modal__close"></button>
</div>
<div class="a-modal__content">
<p class="-text -m0">Modal content</p>
</div>
<div class="a-modal__footer">
<button class="a-btn -primary -ml2">Next</button>
</div>
</div>
</div>