Dialog

App Design Guides

Dialogs are used when we ask the user for acknowledgment or to respond to an action.

1-Layout

Layout

  • The title and the action area are optional sections. The action area contains the buttons that dismiss the dialog.
  • The body area contains any other relevant information or progress of the dialog, with the dismissal button last.
  • Dialog are automatically orientated depending on the layout of the screen.
  • Negative actions should be displayed at the bottom and positive at the top.

Use the dialog when:

  • As the dialog takes over the app and interrupts the user; you should consider placing the information or prompts inside the parent screen.
  • The elements revealed would take up much of the display, so it would appear modal regardless.
  • The multiple access points exist for the same operations, so a consistent dialog would be simpler overall than embedding equivalent controls into each access point.

See our Design Values for where we place positive and negative actions to provide a consistent user experience throughout the UI.

Behaviour

The dialog can be launched from the main app, or from within a Popover.

The typical actions of a dialog are ‘Cancel’ and/or ‘Yes/No,’ however some dialogs require from more specific actions. The dialog must be resolved before the user can proceed, as it won’t close if the user taps out of it.

Popover

Popovers are used when you need to provide more contextual information or actions in the app and don’t wish to leave the screen. Popovers can be launched from anywhere, such as the Header or from the page content. To close them simply tap outside of the Popover area.

2_a-InfoPopover

Information popover

This Popover is only used to display extra contextual information.

2_b-SinglePopover

Single task popover

When the single task is carried out by choosing an option, the Popover is automatically dismissed.

API Documentation: UseĀ Action Selection Popover