Modals
Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.
Terms and Conditions
A Terms and Conditions agreement is where you let the public know the terms, rules and guidelines for using your website or mobile app. They include topics such as acceptable use, restricted behavior and limitations of liability
Variations
Basic Modal Requires JS
Copy as:
copydone
<!-- Component: Modal with title & text -->
<!-- Modal with title & text -->
<!-- Modal backdrop -->
<div class="fixed top-0 left-0 z-20 flex items-center justify-center w-screen h-screen bg-slate-300/20 backdrop-blur-sm" aria-labelledby="header-3a content-3a" aria-modal="true" tabindex="-1" role="dialog">
<!-- Modal -->
<div class="flex max-h-[90vh] w-11/12 max-w-xl flex-col gap-6 overflow-hidden rounded bg-white p-6 text-slate-500 shadow-xl shadow-slate-700/10" id="modal" role="document">
<!-- Modal header -->
<header id="header-3a" class="flex items-center gap-4">
<h3 class="flex-1 text-xl font-medium text-slate-700">Terms and conditions</h3>
<button class="inline-flex items-center justify-center h-10 gap-2 px-5 text-sm font-medium tracking-wide transition duration-300 rounded-full focus-visible:outline-none justify-self-center whitespace-nowrap text-emerald-500 hover:bg-emerald-100 hover:text-emerald-600 focus:bg-emerald-200 focus:text-emerald-700 disabled:cursor-not-allowed disabled:text-emerald-300 disabled:shadow-none disabled:hover:bg-transparent" aria-label="close dialog">
<span class="relative only:-mx-5">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" role="graphics-symbol" aria-labelledby="title-79 desc-79">
<title id="title-79">Icon title</title>
<desc id="desc-79">A more detailed description of the icon</desc>
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</span>
</button>
</header>
<!-- Modal body -->
<div id="content-3a" class="flex-1 overflow-auto">
<p>A Terms and Conditions agreement is where you let the public know the terms, rules and guidelines for using your website or mobile app. They include topics such as acceptable use, restricted behavior and limitations of liability.</p>
</div>
</div>
</div>
<!-- End Modal with title & text -->Modal with single action button Requires JS
Copy as:
copydone
<!-- Component: Modal with title, text and an action button -->
<!-- Modal backdrop -->
<div class="fixed top-0 left-0 z-20 flex items-center justify-center w-screen h-screen bg-slate-300/20 backdrop-blur-sm" aria-labelledby="header-2a content-2a" aria-modal="true" tabindex="-1" role="dialog">
<!-- Modal -->
<div class="flex max-h-[90vh] w-11/12 max-w-md flex-col gap-6 overflow-hidden rounded bg-white p-6 text-slate-500 shadow-xl shadow-slate-700/10">
<!-- Modal header -->
<header id="header-2a" class="flex items-center gap-4">
<h3 class="flex-1 text-xl font-medium text-slate-700">User Terms</h3>
<button class="inline-flex items-center justify-center h-10 gap-2 px-5 text-sm font-medium tracking-wide transition duration-300 rounded-full focus-visible:outline-none justify-self-center whitespace-nowrap text-emerald-500 hover:bg-emerald-100 hover:text-emerald-600 focus:bg-emerald-200 focus:text-emerald-700 disabled:cursor-not-allowed disabled:text-emerald-300 disabled:shadow-none disabled:hover:bg-transparent" id="modal" role="document" aria-label="close dialog">
<span class="relative only:-mx-5">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" role="graphics-symbol" aria-labelledby="title-79 desc-79">
<title id="title-79">Icon title</title>
<desc id="desc-79">A more detailed description of the icon</desc>
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</span>
</button>
</header>
<!-- Modal body -->
<div id="content-2a" class="flex-1 overflow-auto">
<p>A Terms and Conditions agreement is where you let the public know the terms, rules and guidelines for using your website or mobile app. They include topics such as acceptable use, restricted behavior and limitations of liability.</p>
</div>
<!-- Modal actions -->
<div class="flex justify-end gap-2">
<!-- base basic button -->
<button class="inline-flex items-center justify-center h-10 gap-2 px-5 text-sm font-medium tracking-wide text-white transition duration-300 rounded focus-visible:outline-none whitespace-nowrap bg-emerald-500 hover:bg-emerald-600 focus:bg-emerald-700 disabled:cursor-not-allowed disabled:border-emerald-300 disabled:bg-emerald-300 disabled:shadow-none">
<span>Continue</span>
</button>
</div>
</div>
</div>
<!-- End Modal with title, text and an action button -->Modal with multiple action buttons Requires JS
Copy as:
copydone
<!-- Component: Modal with title, text and two action buttons -->
<!-- Modal with title, text and two action button -->
<!-- Modal backdrop -->
<div class="fixed top-0 left-0 z-20 flex items-center justify-center w-screen h-screen bg-slate-300/20 backdrop-blur-sm" aria-labelledby="header-1a content-1a" aria-modal="true" tabindex="-1" role="dialog">
<!-- Modal -->
<div class="flex max-h-[90vh] w-11/12 max-w-2xl flex-col gap-6 overflow-hidden rounded bg-white p-6 text-slate-500 shadow-xl shadow-slate-700/10" id="modal" role="document">
<!-- Modal header -->
<header id="header-1a" class="flex items-center gap-4">
<h3 class="flex-1 text-xl font-medium text-slate-700">Terms and Conditions</h3>
<button class="inline-flex items-center justify-center h-10 gap-2 px-5 text-sm font-medium tracking-wide transition duration-300 rounded-full focus-visible:outline-none justify-self-center whitespace-nowrap text-emerald-500 hover:bg-emerald-100 hover:text-emerald-600 focus:bg-emerald-200 focus:text-emerald-700 disabled:cursor-not-allowed disabled:text-emerald-300 disabled:shadow-none disabled:hover:bg-transparent" aria-label="close dialog">
<span class="relative only:-mx-5">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" role="graphics-symbol" aria-labelledby="title-79 desc-79">
<title id="title-79">Icon title</title>
<desc id="desc-79">A more detailed description of the icon</desc>
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</span>
</button>
</header>
<!-- Modal body -->
<div id="content-1a" class="flex-1 overflow-auto">
<p>A Terms and Conditions agreement is where you let the public know the terms, rules and guidelines for using your website or mobile app. They include topics such as acceptable use, restricted behavior and limitations of liability.</p>
</div>
<!-- Modal actions -->
<div class="flex justify-start gap-2">
<button class="inline-flex items-center justify-center h-10 gap-2 px-5 text-sm font-medium tracking-wide text-white transition duration-300 rounded whitespace-nowrap bg-emerald-500 hover:bg-emerald-600 focus:bg-emerald-700 focus-visible:outline-none disabled:cursor-not-allowed disabled:border-emerald-300 disabled:bg-emerald-300 disabled:shadow-none">
<span>I Accept</span>
</button>
<button class="inline-flex items-center justify-center h-10 gap-2 px-5 text-sm font-medium tracking-wide transition duration-300 rounded justify-self-center whitespace-nowrap text-emerald-500 hover:bg-emerald-100 hover:text-emerald-600 focus:bg-emerald-200 focus:text-emerald-700 focus-visible:outline-none disabled:cursor-not-allowed disabled:text-emerald-300 disabled:shadow-none disabled:hover:bg-transparent">
<span>I Decline</span>
</button>
</div>
</div>
</div>
<!-- End Modal with title, text and two action buttons -->Modal with icon & action buttons Requires JS
Copy as:
copydone
<!-- Component: Modal with icon, title,text and action buttons -->
<!-- Modal backdrop -->
<div class="fixed top-0 left-0 z-20 flex items-center justify-center w-screen h-screen bg-slate-300/20 backdrop-blur-sm" aria-labelledby="header-5a content-5a" aria-modal="true" tabindex="-1" role="dialog">
<!-- Modal -->
<div class="flex max-h-[90vh] max-w-xs flex-col gap-6 overflow-hidden rounded bg-white p-6 text-slate-500 shadow-xl shadow-slate-700/10text-center" id="modal" role="document">
<!-- Modal header -->
<header id="header-5a" class="flex flex-col items-center gap-4">
<svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 stroke-pink-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" role="graphics-symbol" aria-labelledby="title-21 desc-21">
<title id="title-21">Icon title</title>
<desc id="desc-21">
A more detailed description of the icon
</desc>
<path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
<h3 class="flex-1 text-xl font-medium text-slate-700">Delete File?</h3>
</header>
<!-- Modal body -->
<div id="content-5a" class="flex-1 overflow-auto">
<p>After deleting the file, recovery will not be possible</p>
</div>
<!-- Modal actions -->
<div class="flex justify-start gap-2">
<button class="inline-flex items-center justify-center flex-1 h-10 gap-2 px-5 text-sm font-medium tracking-wide text-white transition duration-300 rounded whitespace-nowrap bg-emerald-500 hover:bg-emerald-600 focus:bg-emerald-700 focus-visible:outline-none disabled:cursor-not-allowed disabled:border-emerald-300 disabled:bg-emerald-300 disabled:shadow-none">
<span>Yes, I'm sure</span>
</button>
<button class="inline-flex items-center justify-center flex-1 h-10 gap-2 px-5 text-sm font-medium tracking-wide transition duration-300 rounded justify-self-center whitespace-nowrap text-emerald-500 hover:bg-emerald-100 hover:text-emerald-600 focus:bg-emerald-200 focus:text-emerald-700 focus-visible:outline-none disabled:cursor-not-allowed disabled:text-emerald-300 disabled:shadow-none disabled:hover:bg-transparent">
<span>Maybe not</span>
</button>
</div>
</div>
</div>
<!-- End Modal with icon, title,text and action buttons -->Modal with form Requires JS
Copy as:
copydone
<!-- Component: Modal with form -->
<!-- Modal backdrop -->
<div class="fixed top-0 left-0 z-20 flex items-center justify-center w-screen h-screen bg-slate-300/20 backdrop-blur-sm" aria-labelledby="header-4a content-4a" aria-modal="true" tabindex="-1" role="dialog">
<!-- Modal -->
<div class="flex max-h-[90vh] max-w-sm flex-col gap-4 overflow-hidden rounded bg-white p-6 text-slate-500 shadow-xl shadow-slate-700/10" id="modal" role="document">
<!-- Modal header -->
<header id="header-4a" class="flex items-center">
<h3 class="flex-1 text-lg font-medium text-slate-700">Welcome back!</h3>
<button class="inline-flex items-center justify-center h-10 gap-2 px-5 text-sm font-medium tracking-wide transition duration-300 rounded-full focus-visible:outline-none justify-self-center whitespace-nowrap text-emerald-500 hover:bg-emerald-100 hover:text-emerald-600 focus:bg-emerald-200 focus:text-emerald-700 disabled:cursor-not-allowed disabled:text-emerald-300 disabled:shadow-none disabled:hover:bg-transparent" aria-label="close dialog">
<span class="relative only:-mx-5">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" role="graphics-symbol" aria-labelledby="title-79 desc-79">
<title id="title-79">Icon title</title>
<desc id="desc-79">A more detailed description of the icon</desc>
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</span>
</button>
</header>
<!-- Modal body -->
<div id="content-4a" class="flex-1">
<div class="flex flex-col gap-6">
<!-- Input field -->
<div class="relative">
<input id="id-b03" type="email" name="id-b03" placeholder="your name" class="relative w-full h-10 px-4 text-sm placeholder-transparent transition-all border rounded outline-none peer border-slate-200 text-slate-500 autofill:bg-white invalid:border-pink-500 invalid:text-pink-500 focus:border-emerald-500 focus:outline-none invalid:focus:border-pink-500 disabled:cursor-not-allowed disabled:bg-slate-50 disabled:text-slate-400" />
<label for="id-b03" class="absolute left-2 -top-2 z-[1] px-2 text-xs text-slate-400 transition-all before:absolute before:top-0 before:left-0 before:z-[-1] before:block before:h-full before:w-full before:bg-white before:transition-all peer-placeholder-shown:top-2.5 peer-placeholder-shown:text-sm peer-required:after:text-pink-500 peer-required:after:content-['\00a0*'] peer-invalid:text-pink-500 peer-focus:-top-2 peer-focus:text-xs peer-focus:text-emerald-500 peer-invalid:peer-focus:text-pink-500 peer-disabled:cursor-not-allowed peer-disabled:text-slate-400 peer-disabled:before:bg-transparent"> Your email </label>
<small class="absolute flex justify-between w-full px-4 py-1 text-xs transition text-slate-400 peer-invalid:text-pink-500">
<span>Type your email address</span>
</small>
</div>
<!-- Input field -->
<div class="relative my-6">
<input id="id-b13" type="password" name="id-b13" placeholder="your password" class="relative w-full h-10 px-4 pr-12 text-sm placeholder-transparent transition-all border rounded outline-none peer border-slate-200 text-slate-500 autofill:bg-white invalid:border-pink-500 invalid:text-pink-500 focus:border-emerald-500 focus:outline-none invalid:focus:border-pink-500 disabled:cursor-not-allowed disabled:bg-slate-50 disabled:text-slate-400" />
<label for="id-b13" class="absolute left-2 -top-2 z-[1] px-2 text-xs text-slate-400 transition-all before:absolute before:top-0 before:left-0 before:z-[-1] before:block before:h-full before:w-full before:bg-white before:transition-all peer-placeholder-shown:top-2.5 peer-placeholder-shown:text-sm peer-required:after:text-pink-500 peer-required:after:content-['\00a0*'] peer-invalid:text-pink-500 peer-focus:-top-2 peer-focus:text-xs peer-focus:text-emerald-500 peer-invalid:peer-focus:text-pink-500 peer-disabled:cursor-not-allowed peer-disabled:text-slate-400 peer-disabled:before:bg-transparent"> Your password </label>
<svg xmlns="http://www.w3.org/2000/svg" class="absolute top-2.5 right-4 h-5 w-5 cursor-pointer stroke-slate-400 peer-disabled:cursor-not-allowed" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
</svg>
<small class="absolute flex justify-between w-full px-4 py-1 text-xs transition text-slate-400 peer-invalid:text-pink-500">
<span>Type your password</span>
</small>
</div>
</div>
</div>
<!-- Modal actions -->
<div class="flex justify-center gap-2">
<button class="inline-flex items-center justify-center w-full h-10 gap-2 px-5 text-sm font-medium tracking-wide text-white transition duration-300 rounded whitespace-nowrap bg-emerald-500 hover:bg-emerald-600 focus:bg-emerald-700 focus-visible:outline-none disabled:cursor-not-allowed disabled:border-emerald-300 disabled:bg-emerald-300 disabled:shadow-none">
<span>Login</span>
</button>
</div>
</div>
</div>
<!-- End Modal with form -->Usage
A dialog is a type of modal window that appears in front of app content to provide critical information or ask for a decision. Dialogs disable all app functionality when they appear, and remain on screen until confirmed, dismissed, or a required action has been taken.
Dialogs are purposefully interruptive, so they should be used sparingly.
- Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything else in the document and remove scroll from the
<body>so that modal content scrolls instead. - Clicking on the modal “backdrop” will automatically close the modal.
- Modals use
position: fixed, which can sometimes be a bit particular about its rendering. Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements.
Specs
Modals consist of the following elements:
- Modal wrapper: that acts as a backdrop to make the user focus the attention on the modal.
- Modal: with 1.5rem (24px) internal padding.
- Modal header: The header of the modal (any size, usually 1.125rem (18px) or 1.25rem (20px)) with a close button (icon only, base size, see buttons ).
- Modal content: any HTML.
- Modal actions: a set of action buttons for the modal (buttons ).
Accessibility notes
For better accessibility, the native <dialog> is not used.
To improve accessibility:
- The modal wrapper has a
role="dialog" - The modal wrapper has an
aria-labelledby="...", referencing the id of the modal heading and modal content. - The modal has a
role="document". - Modals can be closed by clicking outside the modal or by pressing the
ESCbutton. - When the modal is open
TABandSHIFT+TABshould navigate only on elements inside the modal. - When the modal is open it prevents the underlying body from scrolling.