Design system

Overlays

Menus, dialogs, popovers and tooltips: surfaces that open above the page.

Menu, dialog, popover, tooltip

A menu runs an action, a dialog asks for input, a popover shows detail, and a tooltip names a control.

Why

Exits animate on outside-click and stay instant on Escape, because Base UI flags that close data-instant. Open one and click away to see it.

Alert dialog is not a dialog

Use it to confirm something destructive. Clicking outside doesn't close it.

Why

It is not dismissible by outside click — the whole point is that a choice gets made. Base UI enforces that; using a plain Dialog for a destructive confirm quietly loses it.

Right-click me

Stacking

A tooltip on a control inside a dialog still shows above the dialog.

Why

Tooltip is z-60, above the modal at 50. A tooltip on a dialog control has to clear the dialog, and it never traps focus so nothing hides behind it.