Doorhangers provide a way to present decisions to users which is less intrusive than a modal dialog.
Doorhangers are used for prompt and notification; they are used for full featured UI; or they are used for list and menu as in the example on the left.
Doorhangers opening on the right side of the view show the directional arrow on the right.
Doorhangers opening on the left side of the view show the directional arrow on the left.
Never place the directional arrow at the center of doorhangers.
Background and Border Colors
Border Color: Grey 90 a20
rgba(12, 12, 13, 0.2)
On Windows doorhangers have sharp corners.
On macOS and Linux doorhangers have rounded corners.
Doorhangers appear above other in-view elements. Use shadow 30 to highlight elevation.
Directional Arrow Height:
Directional Arrow Margin Left:
Directional Arrow Width:
Clicking outside of the active area dismiss doorhangers.
When doorhangers content is longer than 90% of the view make the content vertically scrollable.