Examples

Dialog size variants

Apply one of the size modifier classes to the ds-c-dialog element to change the dialog width.

• .ds-c-dialog--narrow
• .ds-c-dialog--wide
• .ds-c-dialog--full

Code

React

See Storybook for React guidance of this component.

Style customization

The following CSS variables can be overridden to customize Dialog components:

Analytics

This component has analytics tracking available. Please see our developer documentation about using analytics in the design system.

Guidance

Accessibility

Keyboard support

• Enter or Space to select the highlighted item.
• Tab to move the focus sequentially through the list of focusable items.
• Shift + Tab to move the focus sequentially through the list of focusable items in reversed order.

Focus Management

• 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 escapeExits prop to false
• 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 initialFocus prop with boolean prop focusDialog set to false

Learn more

• 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

Related patterns

• Alert

Component maturity