Dialog size variants
Apply one of the size modifier classes to the
ds-c-dialog element to change the dialog width.
|Buttons or other HTML to be rendered in the "actions" bar at the bottom of the dialog.|
|Additional classes to be added to the actions container.|
|Aria label for the close button|
|Additional classes to be added to the root dialog element.|
|Size of the close button. See Button component|
|For internationalization purposes, the text for the "Close" button must be passed in as a prop.|
|Variation string to be applied to close button component. See Button component|
|The icon to display as part of the close button|
|Additional classes to be added to the header, which wraps the heading and close button.|
|The Dialog's heading, to be rendered in the header alongside the close button.|
|A custom |
|This function is called after the modal opens|
|This function needs to handles the state change of exiting (or deactivating) the modal.
Maybe it's just a wrapper around |
|The Dialog's size parameter.|
|Analytics events tracking is enabled by default. Set this value to |
|An override for the dynamic content sent to analytics services. By default this content comes from the heading. In cases where this component’s heading may contain sensitive information, use this prop to override what is sent to analytics.|
|If you need the |
|Optional callback that will intercept analytics events for this component.
If none is specified, the design system will use the default analytics
function, which can be overwritten globally with |
The following CSS variables can be overridden to customize Dialog components:
This component has analytics tracking available. Please see our developer documentation about using analytics in the design system.
Spaceto select the highlighted item.
Tabto move the focus sequentially through the list of focusable items.
Shift + Tabto move the focus sequentially through the list of focusable items in reversed order.
- When the modal is opened, the entire modal is the default focus state. Most screen readers will announce the entire dialog content.
- Focus is trapped within the modal and users can then navigate through the dialog actions with the keyboard.
- Escape will close the modal. To disable exiting when users press the Escape key, set the
- When the modal closes, focus returns to the element that was focused just before the modal is activated
- To place the focus inside of the dialog on activating the modal, set the dialog focus using the
initialFocusprop with boolean prop
- Making an accessible dialog box
- GOV.UK modal dialog boxes discussion
- Overuse of Overlays: How to Avoid Misusing Lightboxes
- Using ARIA role=dialog to implement a modal dialog box
For more information about how we tested and validated our work for each checklist item, read our component maturity documentation.
ColorMeets AA color contrast standards for accessibility and color blindness.Complete
Forced Colors Mode (FCM)While using FCM the components text is legible and improves readability.Complete
WCAG 2.1 Level AA ConformanceAll Axe checks for WCAG AA compliance have passed.Complete
Screen readersVoiceOver, NVDA, and JAWS screen readers provide concise communication and interaction.Complete
Keyboard navigationComponent is fully navigable with a keyboard.Complete
StorybookComponent has stories to cover all defined props.Complete
ResponsiveComponent designed to work in all responsive breakpoints.Complete
Spanish translationsIncludes Spanish translations for default text content.Complete
CodeTokens implemented in code.Complete
DesignTokens implemented in the Sketch.Complete