BehaveRespectfully LookDistinctly MovePurposefully SpeakAuthentically ThinkSimply heart_icon
MetLife Design System 2.0

Dialog Box

Variations

There are 2 types of dialog boxes.

1. Primary

Dialog variation one button

The most commonly used, with 75% black (#000000) full screen overlay behind the dialog box. Overlays are always 100% of the screen width and height. Header is black (#000000) and body text is MetLife Darkest Gray (#007ABC). Tapping the ‘x’ or background scrim will dismiss the dialog box.

2. Scrollable

Dialog variation scrollable with one button

For longer text, use scrollable option. The text should not exceed 800 characters.

States

Focused

Dialog state focus first example

Focus state for dialog box header is MetLife Blue 2 (#007ABC).

Focused

Dialog state focus second example

Focus state for dialog box body copy.

Usage

A dialog box is used to provide focused information that requires acknowledgment. They interrupt a user with an important message on an overlay that temporarily disables main window content. The dialog box is centered vertically and horizontally on the screen, regardless of screen size.

Dialog usage first example

Tapping the “i” info icon will open a dialog box providing supplemental information. If the data row contains a link, the data row will have two touch targets – the “i” info icon (20px x 20px touch target) will open the dialog box. The text link will have a different destination.

Dialog usage second example

The dialog box can be closed by tapping outside the modal, and tapping the X or button (this button can also be used for other purposes). Dialog boxes cannot exceed the height or width of the screen.

Dialog usage third example

A scrollable dialog box can accommodate a lengthy message. The scrollable option must be used when the amount of text will not fit within the max height of the dialog box (60px less than the screen).

Animation

Open & Close

Dialog boxes open upon a user tapping an icon, button or text link. Upon open there is a full screen overlay of 75% black (#000000) that fades in. Simultaneously the dialog box container itself scales in from 50% of the final size and fades in.

Upon close both elements reverse their transitions in.

Scroll

Users can scroll content within a dialog box. The scroll bar moves along with the users’ position in the content and content at the bottom of the dialog box is obscured by an overlaid white gradient of 0-100%.