Skip to content
Components

Dialog

Rare, and reserved for decisions with consequences. A map app cannot afford to bury the map, so anything merely explanatory is a popover anchored to the thing it explains.

When to use one

Reach for a dialog when the user is about to lose something. Everything else — an explanation, a definition, a filter — belongs anchored to whatever it is about, where it does not cover the map.

Live

Open one and press Escape, then Tab around. The focus trap, the inert background and the backdrop are the platform's, not ours.

Email this report?

A PDF of 42 Jarrah Street goes to jordan@example.com. The link stays valid for 30 days.

Remove this parcel from the project?

42 Jarrah Street and its saved scenarios will be deleted. Reports you've already emailed stay valid.

Why the native element

The entire reason this component is short.

It is built on <dialog> and showModal(), which give us — for free and correctly — a focus trap, the rest of the page marked inert, Escape to close, top-layer stacking that no z-index can lose to, and a ::backdrop.

Every hand-rolled modal in this repo's history re-implemented some of that and missed the rest. aria-modal="true" is a PROMISE that the background is inert, and a div cannot keep it.

Navigate

Esc