The dialog component is a modal window that captures user attention for critical interactions, such as confirmations, alerts, or form inputs. It appears above the main content and requires user action before continuing. To maintain usability, dialogs should be concise, focused on a single task, and provide clear actions like confirmation or dismissal.
- 1.Title: displays the main heading of the dialog, providing users with a clear and immediate understanding of its purpose
- 2.Container: the structural wrapper that holds all dialog elements, ensuring proper alignment, spacing, and responsiveness.
- 3.Close action: an optional button, usually represented by an “X” icon, allowing users to dismiss the dialog without completing an action.
- 4.Content: the main area where relevant information, messages, or interactive elements (e.g., forms) are displayed.
- 5.Actions: a set of buttons at the bottom of the dialog that guide users toward completing or cancelling the intended action.
* Please note that while these elements are not included by default in the component's configuration, they are the expected components in a dialog.
Any content (Halstack components or custom) can be placed inside the dialog component. Dialog tasks should be direct and easy to complete. However, to ensure that the component is used as intended and to prevent it from becoming unusable, please consider the following aspects:
- Avoid placing complex or large amounts of data, as it will increase the cognitive load and users will struggle when processing information.
- As much as possible, avoid scrolling in a dialog, as it disrupts focus and usability, especially for modal interactions that require immediate attention. It can also make critical actions harder to access, forcing users to scroll to find the key information or buttons. Instead, keep dialogs concise or consider alternative patterns to display the information.
The overlay element helps focus the user's attention on the dialog by creating a semi-transparent layer between the main application and the modal content. This visual separation reduces distractions, ensures the dialog stands out, and reinforces the need for user action before returning to the underlying interface. Additionally, it enhances accessibility by preventing unintended interactions with background elements.
- Use dialogs for critical interactions: reserve dialogs for important decisions that require user confirmation or input.
- Ensure clarity: titles and messages should be direct, with clear descriptions of the action's consequences.
- Provide easy dismissal: always include a way to close the dialog, whether through a cancel button or a close icon.
- Maintain focus: keep the user's attention within the dialog by managing focus and preventing background interactions.
- Provide clear actions: use distinct primary and secondary buttons for confirmation and cancellation.
- Keep it focused: dialogs should be concise and address a single task to avoid overwhelming users.
- Avoid scrolling: keep content brief to prevent excessive scrolling; use alternative patterns for complex interactions.