Dialogs
Dialogs
A dialog box is a secondary window that allows users to perform a command, asks users a question, or provides users with information or progress feedback. In general, it consists of a title bar, body, and footer.
Embedded Files
Title bar
Title bar
The title bar resides at the top of a window and includes options for closing, minimizing, and zooming (or expanding to full-screen mode) the window.
Dialog controls should follow the layout pattern dictated by the hosting platform:
Windows: Minimize, Maximize, Close on the right
Mac: Close, Minimize, Full Screen on the left
When to include these controls:
Close: Always
Minimize: If the dialog is modeless
Maximize/Full Screen: If a dialog is resizable
The Windows layout of a modeless, non-resizable dialog is shown above.
Footer
Footer
The dialog footer can optionally contain the primary and secondary action buttons, a checkbox, and/or the help button.
Button placement should follow the layout pattern dictated by the hosting platform:
Windows: Secondary Cancel/Close button is positioned farthest to the right (shown above)
Mac: Primary action button is positioned farthest to the right
Accessibility Tip: The primary action button should respond to the Enter key automatically and be in focus when the dialog is first opened (unless the dialog’s content contains focusable UI).
Content Area
Content Area
The content area contains descriptive information and controls. The 20px margin measurement should be consider the minimum.
Report abuse