After reading this article you’ll know:
Major characteristics and options of the Dialog component
How to use this component in your application
The difference between the Dialog, Snackbar, and Alert
Dialog component explained
Dialog is a versatile feature, designed to improve the way information is presented to users. It primarily functions as a way to display additional content while not disrupting the flow of the page.
The Dialog component is essentially a Box that overlays all other content on the page. This allows it to highlight specific information without causing distraction or obscuring the underlying content. The Dialog box is dismissable by default, enabling users to easily close it once they have finished viewing the additional information it contains.
The Dialog component within Betty Blocks Pages can be used in multiple scenarios, depending on the needs of your application.
One of the most common uses of the Dialog box is to provide more detailed information about a particular item or feature. For instance, in an e-commerce application, a Dialog box might show a larger product image along with a detailed description, without navigating away from the product listing page.
Dialogs can also be used as a tool for user confirmation actions. For example, before deleting an item or submitting a form, a Dialog box can be used to ask the user for confirmation. This ensures that users fully understand the implications of their actions.
Options
Visibility: Tick the component visibility on and off in the builder mode
Fullscreen: Show the Dialog in fullscreen, without showing the other page components on the background
Disable backdrop click enables the click outside of the Dialog window to close
Width regulates how wide the Dialog window is. You can choose from extra-small to extra-large window sizes
With the Initial state option, one can keep the Dialog window hidden or visible in the runtime (live application)
Using the Dialog component
Here, we’ll show how the Dialog is used for form submissions. Rather than taking users to a new page to fill out a form, a Dialog component can be used to display the form on the same page. Once the user has completed the form, they can simply close the Dialog box and return to their original task.
Drop the Dialog onto a prepared page with one of the Form components. The Dialog combines various Page components within itself. You can click through the Title, Text, and Button components separately adjusting them to your needs.
Tip! Open the Component tree to see all the components in the Dialog.
Once you’re done editing your Dialog window, click on the space outside it and disable the Dialog’s visibility with the Visible in builder button. Now you’re able to continue building the rest of your page.
Dialog vs Snackbar & Alert
Another common use of the Dialog component is to present notifications or alerts to the users. These may include warnings, error messages, or updates that require immediate user attention. Although Dialog is surely useful in these cases, some other similar components can be applied instead.
Snackbar is a lightweight component used to show brief messages at the bottom of the screen. Snackbars appear above all other elements on the screen and only one can be displayed at a time. They auto-dismiss soon after when the Auto-hide option is enabled.
Alert is a type of dialog that's used to inform the user about important updates, report errors, or present critical information. It typically appears in response to a user-initiated action, such as a button click. Alerts can contain a Title, Body text, Icons, and more versatile styling, aligning, and spacing options compared to the Dialog.
When building pages, Dialogs can be particularly useful in scenarios where more detailed user interaction is needed compared to Snackbars and Alerts. Snackbars are suitable for brief, non-intrusive messages, while Alerts are best for immediate notifications or critical updates. However, Dialog offers a flexible solution for situations requiring more interactions or information presentation.