Modals cheat sheet

How wide a modal or dialog should be. These are practical starting ranges, not standards. On mobile, avoid a tiny desktop-style modal squeezed into the screen: anything beyond a short confirmation works better near full width or full screen.

Mobile

Full width or full screen

Tablet

Sized to content, inside the page margins

Laptop

Small 400–480, medium 560–720, large 800–960 pxSame as desktop

Desktop

Small 400–480, medium 560–720, large 800–960 px

Large desktop

Small 400–480, medium 560–720, large 800–960 pxSame as desktop

Depends on how much the modal holds, whether it contains a form, touch or pointer. A starting point, not a correct value.

400–480

Small. Confirmations and single decisions.

560–720

Medium. A short form or a few settings.

800–960

Large. Content that needs two columns or a preview. Ask whether it should be a page.

Three ways to put something over the page. Choose by how much the person needs to see behind it and how long they will stay.

Modal

A short, blocking decision. Confirm, name, choose one thing. The page behind does not matter until it is done.

Drawer

Detail or tools beside the page. Filters, a record's details, settings that affect what is behind. The page stays visible and often usable.

Full screen

A task in its own right. A long form, a multi-step flow, an editor. On mobile, most things that are modals on desktop.

Senior designer note“If people need to look at the page while they do it, it is not a modal.”

No official source Shortcut tracks sets a rule for this. It is a judgement call.