Dialog

MYDS-compliant dialog component for seamless transition starting point from HTML/CSS to React

Overview

The MYDS HTML/CSS Dialog provides a modal component for applications not using React. It ensures proper state handling, accessibility features, and design harmony across public-sector interfaces.

1. Setup

Follow these steps to prepare the dialog styles in your HTML project.

Recommended Import Order Make sure to load the stylesheets in this sequence to ensure proper styling:

<link rel="stylesheet" href="css-reset.css" />  <!-- refer to ResetCSS -->
<link rel="stylesheet" href="dialog.css" />     <!-- refer to DialogCSS -->
<link rel="stylesheet" href="dialog-dark.css" /> <!-- refer to DialogDarkCSS -->

This guarantees that:

The CSS reset applies first.
The dialog base styles override the reset where necessary.
The dark theme styles apply last, so they can override both the reset and base dialog styles when needed.

Step 2 - Include the required font

The Inter font is part of the MYDS design guidelines. Add it inside your <head>:

<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
  rel="stylesheet"
/>

Your <head> should look similar to:

<head>
  <!-- Inter Font -->
  <link
    href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
    rel="stylesheet"
  />
 
  <!-- Design System Stylesheet -->
  <link rel="stylesheet" href="css-reset.css" />
  <link rel="stylesheet" href="dialog.css" />
  <link rel="stylesheet" href="dialog-dark.css" />
</head>

2. Usage

The dialog uses the native HTML <dialog> element with the following structure:

<button class="button-myds-primary" onclick=openDialog()>
  Open Dialog
</button>
 
<dialog>
  <div class="myds-dialog-header">
    <h2 class="myds-dialog-title">Dialog Title</h2>
  </div>
 
  <div class="myds-dialog-content">
    <p>Dialog content goes here.</p>
  </div>
 
  <div class="myds-dialog-footer">
    <div class="myds-dialog-actions-group">
      <button class="button-myds button-myds-secondary" type="button" onclick=closeDialog()>
        Secondary Action
      </button>
      <button class="button-myds button-myds-primary" type="button" onclick=closeDialog()>
        Primary Action
      </button>
    </div>
  </div>
  
  <button class="myds-dialog-close" onclick=closeDialog() aria-label="Close">
    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  </button>
</dialog>

3. Structure

The dialog consists of the following elements:

Trigger Button: Opens the dialog using showModal()
Dialog Element: Native HTML5 dialog element
Dialog Header: Contains the title
Dialog Content: Main content area
Dialog Footer: Contains action buttons wrapped in myds-dialog-actions-group
Close Button: Positioned absolutely in the top-right corner

4. States

Each button in the dialog supports:

Default
Hover
Focused
Disabled

5. Anatomy

Selector	Purpose
`dialog`	Native HTML dialog element with custom styling
`dialog::backdrop`	The backdrop overlay (styled via pseudo-element)
`.myds-dialog-header`	Header section
`.myds-dialog-title`	Dialog title styling
`.myds-dialog-content`	Content area
`.myds-dialog-footer`	Footer section
`.myds-dialog-actions-group`	Wrapper for footer buttons
`.myds-dialog-close`	Close button
`.button-myds`	Base button styles
`.button-myds-primary`	Primary action button
`.button-myds-secondary`	Secondary action button
`.page-center`	Centers content on the page

6. Customization

You can override default styles in your stylesheet. Example:

dialog {
  max-width: 40rem; /* Custom dialog width */
}
 
.myds-dialog-title {
  font-size: 1.25rem; /* Custom title size */
}

7. JavaScript

The implementation uses the native dialog API:

const dialog = document.querySelector('dialog');
 
// Open dialog
function openDialog() {
  dialog.showModal();
}
 
// Close dialog
function closeDialog() {
  dialog.close();
}
 
// Close on backdrop click (dismissible)
dialog.addEventListener('click', (e) => {
  const rect = dialog.getBoundingClientRect();
  if (
    e.clientX < rect.left ||
    e.clientX > rect.right ||
    e.clientY < rect.top ||
    e.clientY > rect.bottom
  ) {
    closeDialog();
  }
});

8. Accessibility

Built with the native <dialog> element
Keyboard navigation supported (ESC key closes dialog by default)
Semantic button elements
Visible focus ring for keyboard users
SVG icon with proper viewBox for the close button

Dialog

On this page