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.
Use the modal with a carousel where information can be presented in multiple steps.
Tip! Useful for news, guides and other info that should gain focus in some cases.

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>

Modal with carousel

With the modal React component, the carousel is activated by passing the hasCarousel boolean prop.
Only content (children) have to be added as slides, and the component will handle the rest.

<dialog class="mb-modal mb-modal--default maxw32r relative" open>
  <div class="relative mb-carousel-container">
    <button class="btn-link close-btn" aria-label="Close">
      <span data-mybicon="mybicon-cross" data-mybicon-class="icon-ui"></span>
    </button>
    <div class="mb-modal--body mb-carousel">
      <section aria-label="Content carousel - Showing 2 of 3" class="carousel-slider" tabindex="0">
        <!-- Slide 1 -->
        <div class="pam w100p">
          <h2>Slide 1 heading</h2>
        </div>
        <!-- Slide 2 -->
        <div class="pam w100p">
          <h2>Slide 2 heading</h2>
          <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Culpa dolor fugit minima provident optio libero ipsa accusantium modi expedita soluta, vitae cupiditate maiores quis maxime dicta aperiam error odio voluptates.</p>
        </div>
        <!-- Slide 3 -->
        <div class="pam w100p">
          <h2>Slide 3 heading</h2>
        </div>
      </section>
      <button class="btn pas arrow-button left-btn" aria-label="Show 1 of 3">
        <span data-mybicon="mybicon-arrow-left" data-mybicon-class="icon-ui--m"></span>
      </button>
      <button class="btn pas arrow-button right-btn" aria-label="Show 3 of 3">
        <span data-mybicon="mybicon-arrow-right" data-mybicon-class="icon-ui--m"></span>
      </button>
      <div class="flex justify-cc align-ic gas">
        <button class="btn-link--dark carousel-dot" value="0" title="Go to step 1">
          <span class=""></span>
        </button>
        <button class="btn-link--dark carousel-dot" value="1" title="Go to step 2">
          <span class="active"></span>
        </button>
        <button class="btn-link--dark carousel-dot" value="2" title="Go to step 3">
          <span class=""></span>
        </button>
      </div>
    </div>
  </div>
</dialog>