Halstack
Design system
v6.0.0
OverviewIntroduction
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.
| Property | Element | Core token | Value |
|---|---|---|---|
font-family | Title | font-family-sans | 'Open Sans, sans-serif' |
font-size | Title | font-scale-05 | 1.5rem / 24px |
font-weight | Title | font-weight-semibold | 600 |
fontFamily | Content | font-family-sans | 'Open Sans, sans-serif' |
fontSize | Content | font-scale-03 | 1rem / 16px |
fontWeight | Content | font-weight-regular | 400 |
| Component token | Element | Core token | Value |
|---|---|---|---|
closeIconBorderThickness | Icon close | border-width-0 | 0px |
closeIconBorderStyle | Icon close | border-style-solid | solid |
closeIconBorderRadius | Icon close | border-radius-none | 0 |
| Property | Element | Core token | Value |
|---|---|---|---|
border-width | Container | border-width-0 | 0 |
border-style | Container | border-style-none | none |
border-radius | Container | border-radius-medium | 0.25rem / 4px |
- Understanding WCAG 2.2 - 2.1.2 No Keyboard Trap
- Understanding WCAG 2.2 - 2.4.3 Focus Order
- WAI-ARIA Authoring practices 1.2 - 3.9 Dialog (Modal)
- WAI-ARIA Authoring practices 1.2 - Modal Dialog Example
Edit this page on GitHub
PreviousDate Input
NextDropdown