DXC Logo
Halstack logo
Halstack
Design system
v6.0.0
OverviewIntroduction
PrinciplesColorSpacingTypographyLayoutThemesLocalization
ComponentsAccordionAlertApplication layoutBleedBoxBulleted ListButtonCardCheckboxChipDate InputDialogDropdownFile InputFlexFooterHeaderHeadingInsetLinkNav TabsNumber InputPaginatorParagraphPassword InputProgress BarQuick NavRadio GroupResultset TableSelectSidenavSliderSpinnerSwitchTableTabsTagText InputTextareaToggle GroupTypographyWizard

Dialog

Ready

A modal dialog is a message box or child window that requires user interaction before returning to the parent window. These boxes appear on top of the open parent window that is currently displayed on the screen.

Usage

  • The dialog always should have a title to introduce the actions or information that will get displayed on the screen.
  • Can contain a descriptive text or a phrase related to the action that triggered the dialog.
  • Can have some combinations of actions, like buttons to accept/cancel the action. There can be one, two or more buttons.
  • If the dialog is not including a cancel action, provide a way to close it.
  • Modal dialog boxes should overlay only a portion of the underlying page to keep the user oriented within the workflow.

Content

Example of a dialog using Halstack components as content
Example of a dialog using Halstack components as content

Any content (Halstack components or custom) can be placed inside the dialog component. Dialog tasks should be direct and easy to complete.

  • Do not use to display complex or large amounts of data.
  • Do not recreate a full app or page in a dialog
  • Try always to avoid scrolling

Overlay

Example of the overlay usage
Example of the overlay usage

The overlay element makes possible to get the user attention into the dialog creating a layer between the actual application and the modal information showed in the user interface.

Contents

Edit this page on GitHub
Previous
Date Input
NextDropdown