drdr-dialog overview

Use the dialog component to display focused content or actions that require a user's attention before they continue. It uses the native HTML <dialog> element.

Accessibility

• showModal() handles focus management automatically
• The Escape key closes the dialog — native browser behaviour, no JavaScript needed
• closedby="any" also allows closing by clicking the backdrop
• The close button must have aria-label="Close dialog"
• The SVG icon inside the close button must have aria-hidden="true"

Props

These are the CSS class modifiers and HTML attributes available on the drdr-dialog component.

Size modifiers

Applied as an additional class on the <dialog> element.

Modifier	Max width	Use for
none	90vw	General purpose, responsive default
-thin	450px	Short confirmations and single-action prompts
-large	700px	Richer content that needs more horizontal space
-full	100% − 2rem	Near full-screen on all viewports

Button alignment modifiers

Applied as an additional class on a <button> inside .dialog-container or .dialog-footer.

Modifier	Effect
none	Buttons share space evenly
.-left	Pushes the button to the left
.-right	Pushes the button to the right
.-center	Centers the button
.-full	Button spans full width

HTML attributes

Attribute	Type	Default	Description
id	string	—	Required. Used to open the dialog via showModal()
class	string	drdr-dialog	Add size modifiers here e.g. drdr-dialog -thin
closedby	string	—	Set to "any" to allow closing by clicking the backdrop

Basic dialog

Use -thin as the default for most dialogs — it is centred and capped at 450px, which works well across all viewports. Use a single primary .button for a single action.

            

<dialog class="drdr-dialog -thin" id="my-dialog" closedby="any">
  <div class="dialog-container">

    <header class="dialog-header">
      <div class="dialog-icon-container">
        <span>Close</span>
        <button type="button" class="dialog-close" aria-label="Close dialog"
                onclick="this.closest('dialog').close()">
          <svg class="dialog-close-icon" xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 24 24" aria-hidden="true" height="24" width="24">
            <path d="M13.41 12l5.3-5.29a1 1 0 1 0-1.42-1.42L12 10.59l-5.29-5.3a1 1 0 0 0-1.42 1.42l5.3 5.29-5.3 5.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l5.29-5.3 5.29 5.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z" />
          </svg>
        </button>
      </div>
      <h2 class="dialog-title">Dialog title</h2>
    </header>

    <div class="dialog-body">
      <p>Body content goes here.</p>
    </div>

    <footer class="dialog-footer">
      <button class="button -primary" onclick="this.closest('dialog').close()">Confirm</button>
    </footer>

  </div>
</dialog>
            
          

This will produce the following:

Open dialog

With two action buttons

Use .button -primary for all action buttons inside a dialog footer.

            
<footer class="dialog-footer">
  <button class="button -secondary" onclick="this.closest('dialog').close()">No</button>
  <button class="button -primary" onclick="this.closest('dialog').close()">Yes</button>
</footer>
            
          

Live example matching the PatientPortal appointment confirmation dialog:

Open dialog

Size variants

Apply the size modifier directly on the <dialog> element alongside drdr-dialog.

Default (90vw)   Thin (450px)   Large (700px)   Full