Modal
Also called dialog, modal window, or popup
A window that opens over the page, dims everything behind it, and blocks the rest of the interface until you finish or dismiss it.
import { Dialog } from '@base-ui/react/dialog';
export function DeleteProjectDialog({ onDelete }: { onDelete: () => void }) {
return (
<Dialog.Root>
<Dialog.Trigger className='rounded-lg border px-4 py-2 text-sm font-medium text-red-600 hover:bg-red-500/10'>
Delete project
</Dialog.Trigger>
<Dialog.Portal>
<Dialog.Backdrop className='fixed inset-0 bg-black/40 transition-opacity duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0' />
{/* Base UI moves focus inside, keeps Tab there, closes on Escape or a
backdrop click, and returns focus to the trigger. */}
<Dialog.Popup className='fixed top-1/2 left-1/2 w-100 max-w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 rounded-xl border bg-background p-6 shadow-xl transition-[opacity,scale] duration-200 ease-out data-ending-style:scale-[0.96] data-ending-style:opacity-0 data-starting-style:scale-[0.96] data-starting-style:opacity-0'>
<Dialog.Title className='text-lg font-semibold'>
Delete project?
</Dialog.Title>
<Dialog.Description className='mt-2 text-sm text-muted-foreground'>
Website redesign and its 24 files will be removed for everyone. This
can’t be undone.
</Dialog.Description>
<div className='mt-6 flex justify-end gap-2'>
<Dialog.Close className='rounded-lg border px-4 py-2 text-sm font-medium hover:bg-muted'>
Cancel
</Dialog.Close>
<Dialog.Close
onClick={onDelete}
className='rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-700'
>
Delete
</Dialog.Close>
</div>
</Dialog.Popup>
</Dialog.Portal>
</Dialog.Root>
);
}Add a confirmation modal to the Delete project button: dim the page with a 40% black backdrop and center a 400px-wide dialog titled 'Delete project?' with Cancel and Delete buttons. Fade it in while scaling from 0.96 to 1 over 200ms with an ease-out curve. Move focus into the dialog, keep Tab inside it, close it on Escape or a backdrop click, and return focus to the Delete project button afterward.
Paste into Layerwise or any AI coding tool.
What is Modal?
A modal appears in the middle of the screen on top of a dimmed backdrop. While it is open, nothing behind it responds, so people have to deal with it first: confirm, fill in a short form, or close it.
Use a modal when an action needs a decision before anything else happens, such as confirming a delete, or for a short, focused task like renaming a file. Longer forms and content people want to read alongside the page fit better in a drawer or on their own page, and a quick setting tied to one button fits in a popover.
A good modal moves keyboard focus inside when it opens, keeps Tab cycling within it, closes on Escape, and returns focus to the button that opened it. Label its buttons with the action itself, like Delete or Save changes. The native <dialog> element opened with showModal() gives you the backdrop, the Escape key, and an inert page behind it for free.
Often confused with
Related terms
All termsDrawer
A panel that slides in from the edge of the screen, usually the bottom on phones or the side on desktop, to show extra content or options.
Popover
A small floating panel anchored to the button that opened it, often with an arrow, holding a few controls and closing when you click outside.
Focus ring
An outline that marks which element has keyboard focus, so people moving through a page with the Tab key can see where they are.
Scale in
An entrance animation where an element grows from slightly smaller than its final size to full size while it fades in.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.