Modal

Handling prompts as page modals

React component

Guidelines

Build the modal with the dialog element. This addresses several accessibility aspects for free concerning modals. Read more about the dialog on MDN.
Actions and focus outside the modal should not be available when it’s open. This is achieved by using the showModal() method when opening the modal.
Let buttons define their own dimensions, except for when very small buttons, like "OK" becomes less prominent than "Cancel". The minw5r class is a good fit in such cases.
Place the main action to the right.
Use aria-labelledby and aria-describedby in addition to complement with some better description of the modal.

Confirm/Cancel

<dialog
  aria-labelledby="dialog-1-title"
  aria-describedby="dialog-1-desc"
  class="mb-modal maxw32r"
  open
>
  <div>
    <h2 id="dialog-1-title" class="text-1.25r">Descriptive title</h2>
    <p id="dialog-1-desc" class="mbl">
      A prompt for confirmation that is clear and unambiguous in message and choices.
    </p>
    <div class="tr">
      <button class="btn">Cancel</button>
      <button class="btn btn--green mls">Confirm and proceed</button>
    </div>
  </div>
</dialog>

Destructive, non-reversible action

<dialog
  aria-labelledby="dialog-2-title"
  aria-describedby="dialog-2-desc"
  class="mb-modal mb-modal--danger maxw32r"
  open
>
  <div>
    <h2 id="dialog-2-title" class="text-1.25r">Delete key</h2>
    <p id="dialog-2-desc" class="mbl">
      All connections using this key will stop working. It cannot be
      recovered, but you can generate a new one. Are you sure you want to
      delete your key?
    </p>
    <div class="tr">
      <button class="btn">No, cancel</button>
      <button class="btn btn--danger mls">Yes, delete key</button>
    </div>
  </div>
</dialog>