Skip to main content

Dialog

Dialog should be used whenever an action needs confirmation. For example, it can be used when editing forms, where changed data can impact other flows.

Use sparingly, not all streams need a confirmation Dialog. If it's a complex task, prefer to create a new screen instead of showing a dialog box.

Elements​

The Dialog consists of:

  • Title: The title is responsible for contextualizing the action and must be linked to the text of the button. Typically, titles are in the form of a question, which must be answered by the confirmation button label.
  • Text: Use a paragraph with more information about the context of the action. It is possible to have other components such as Checkbox, Input, among others
  • Error prevention (optional): For confirmation of critical actions, confirmation via Checkbox can be used, giving more security to the process
  • Close: Button to close the dialog box has the same result as the "Cancel" button
  • Actions: The button label must be connected to the dialog title text

Motion​

The Dialog entry animation, when it is called by some button or link, is a movement from the top to the center of the page.

The exit animation, when the click happens outside the Dialog or on the "Cancel" button (or even on the "X"), the movement starts at the current position and goes to the top of the page.

Kinds​

Default​

Typically used to confirm trivial actions, such as confirming a form edit.

Sensible actions​

Used for actions to delete information or for irreversible actions. In such cases, a confirmation - such as Checkbox or Input - is needed within the Dialog, to ensure that the user is really aware of the consequences of the action. The confirmation button in this situation should be kind of Danger.

The primary action button of sensitive dialogs is only active after clicking on the confirmation mechanism, thus avoiding confirmation by mistake.

Feedback​