Doorhangers provide a way to present decisions to users which is less intrusive than a modal dialog.

Usage

Firefox action menu uses the doorhanger component

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.

Structure

Directional Arrow

Directional arrow used on the right and on the left of a doorhanger

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.

Style

Background and Border Colors

Empty doorhanger

Background: White #ffffff

Border Color: Grey 90 a20 rgba(12, 12, 13, 0.2)

Corner Radius

Doorhanger sharp corner radius on Windows

On Windows doorhangers have sharp corners.

Doorhanger round corner radius on macOS

On macOS and Linux doorhangers have rounded corners.

Corner Radius: 2px

Shadows

Highlight of the doorhanger shadow

Doorhangers appear above other in-view elements. Use shadow 30 to highlight elevation.

Sizes

Redlines and specs of a doorhanger

Directional Arrow Height: 9px

Directional Arrow Margin Left: 16px

Directional Arrow Width: 18px

Maximum Height: 90%

Maximum Width: 320px

Behavior

Clicking outside of the active area dismiss doorhangers.

When doorhangers content is longer than 90% of the view make the content vertically scrollable.