dialog

A dialog can be used to present the user with an immediately needed choice.

It comes in three variations:

  • The default dialog does have a text and two choices. A close icon is optional.
  • The small dialog only has one option, and an optional close icon.
  • The alert dialog has a headline, and one of four levels: info, success, warning and error. Alert dialogs do not have a close icon.
  • A third optional button can be implemented in all variants.

The Dialog component offers the following key features:

  • Modal Dialogs: These dialogs are closed by default and overlay the rest of the page when opened. When a modal dialog is active, the user cannot interact with the underlying page until the dialog is closed.

  • Non-Modal Dialogs: Non-modal dialogs are also closed by default but allow the user to interact with the rest of the page while the dialog is open. Please note that the Escape key does not automatically close non-modal dialogs.

  • Modal-less Dialogs: Unlike the previous two types, modal-less dialogs are already opened on page load, triggered by the presence of the open attribute. However, they lack the keyboard trap functionality, meaning that the focus can move beyond the dialog area.

For accessibility reasons, it's important to include a close button within non-modal and modal-less Dialogs.

Using the Dialog Component

The Dialog component relies on the user to specify an external element as a trigger for opening the dialog. This means that the user needs to explicitly define which element will initiate the dialog's opening.

table of content

component variations

Default dialog

Open on blank page
Title Text M Bold
Content Headline Text XL Bold
Paragraph text with style text M. Invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et jus to duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
<div class="frontend-kit-example_modal-dialog">
  <button
    type="button"
    class="a-button a-button--primary -without-icon a-button-dialog"
    data-frok-action="show"
  >
    <span class="a-button__label">Open dialog</span>
  </button>
  <dialog
    class="m-dialog -floating-shadow-s -floating"
    id="default-non-modal-dialog"
    aria-labelledby="dialog-default-non-modal-dialog-title"
  >
    <div class="m-dialog__header">
      <div class="m-dialog__title">Title Text M Bold</div>
      <button
        type="button"
        class="a-button a-button--integrated -without-label"
        data-frok-action="close"
        aria-label="close dialog"
      >
        <i class="a-icon a-button__icon ui-ic-close"></i>
      </button>
    </div>
    <hr class="a-divider" />
    <div class="m-dialog__content">
      <div
        class="m-dialog__headline"
        id="dialog-default-non-modal-dialog-title"
      >
        Content Headline Text XL Bold
      </div>
      <div
        class="m-dialog__body"
        id="dialog-default-non-modal-dialog-description"
      >
        Paragraph text with style text M. Invidunt ut labore et dolore magna
        aliquyam erat, sed diam voluptua. At vero eos et accusam et jus to duo
        dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
        est Lorem ipsum dolor sit amet.
      </div>
      <div class="m-dialog__actions">
        <button
          type="button"
          class="a-button a-button--secondary -without-icon"
          data-frok-action="optional"
        >
          <span class="a-button__label">Optional button</span>
        </button>
        <button
          type="button"
          class="a-button a-button--primary -without-icon"
          data-frok-action="confirm"
        >
          <span class="a-button__label">Confirm</span>
        </button>
        <button
          type="button"
          class="a-button a-button--secondary -without-icon"
          data-frok-action="cancel"
        >
          <span class="a-button__label">Cancel</span>
        </button>
      </div>
    </div>
  </dialog>
</div>

Default dialog without close button

Open on blank page
Title Text M Bold
Content Headline Text XL Bold
Paragraph text with style text M. Invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et jus to duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
<div class="frontend-kit-example_modal-dialog">
  <button
    type="button"
    class="a-button a-button--primary -without-icon a-button-dialog"
    data-frok-action="show"
  >
    <span class="a-button__label">Open dialog</span>
  </button>
  <dialog
    class="m-dialog -floating-shadow-s -floating"
    id="default-dialog-without-close-button"
    aria-labelledby="dialog-default-dialog-without-close-button-title"
  >
    <div class="m-dialog__header">
      <div class="m-dialog__title">Title Text M Bold</div>
    </div>
    <hr class="a-divider" />
    <div class="m-dialog__content">
      <div
        class="m-dialog__headline"
        id="dialog-default-dialog-without-close-button-title"
      >
        Content Headline Text XL Bold
      </div>
      <div
        class="m-dialog__body"
        id="dialog-default-dialog-without-close-button-description"
      >
        Paragraph text with style text M. Invidunt ut labore et dolore magna
        aliquyam erat, sed diam voluptua. At vero eos et accusam et jus to duo
        dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
        est Lorem ipsum dolor sit amet.
      </div>
      <div class="m-dialog__actions">
        <button
          type="button"
          class="a-button a-button--primary -without-icon"
          data-frok-action="confirm"
        >
          <span class="a-button__label">Confirm</span>
        </button>
        <button
          type="button"
          class="a-button a-button--secondary -without-icon"
          data-frok-action="cancel"
        >
          <span class="a-button__label">Cancel</span>
        </button>
      </div>
    </div>
  </dialog>
</div>

Default dialog with long title

Open on blank page
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo dolorem accusamus modi possimus!
Content Headline Text XL Bold
Paragraph text with style text M. Invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et jus to duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
<div class="frontend-kit-example_modal-dialog">
  <button
    type="button"
    class="a-button a-button--primary -without-icon a-button-dialog"
    data-frok-action="show"
  >
    <span class="a-button__label">Open dialog</span>
  </button>
  <dialog
    class="m-dialog -floating-shadow-s -floating"
    id="default-dialog-with-long-title"
    aria-labelledby="dialog-default-dialog-with-long-title-title"
  >
    <div class="m-dialog__header">
      <div class="m-dialog__title">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo dolorem
        accusamus modi possimus!
      </div>
      <button
        type="button"
        class="a-button a-button--integrated -without-label"
        data-frok-action="close"
        aria-label="close dialog"
      >
        <i class="a-icon a-button__icon ui-ic-close"></i>
      </button>
    </div>
    <hr class="a-divider" />
    <div class="m-dialog__content">
      <div
        class="m-dialog__headline"
        id="dialog-default-dialog-with-long-title-title"
      >
        Content Headline Text XL Bold
      </div>
      <div
        class="m-dialog__body"
        id="dialog-default-dialog-with-long-title-description"
      >
        Paragraph text with style text M. Invidunt ut labore et dolore magna
        aliquyam erat, sed diam voluptua. At vero eos et accusam et jus to duo
        dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
        est Lorem ipsum dolor sit amet.
      </div>
      <div class="m-dialog__actions">
        <button
          type="button"
          class="a-button a-button--primary -without-icon"
          data-frok-action="confirm"
        >
          <span class="a-button__label">Confirm</span>
        </button>
        <button
          type="button"
          class="a-button a-button--secondary -without-icon"
          data-frok-action="cancel"
        >
          <span class="a-button__label">Cancel</span>
        </button>
      </div>
    </div>
  </dialog>
</div>

Default dialog with long title without close button

Open on blank page
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo dolorem accusamus modi possimus!
Content Headline Text XL Bold
Paragraph text with style text M. Invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et jus to duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
<div class="frontend-kit-example_modal-dialog">
  <button
    type="button"
    class="a-button a-button--primary -without-icon a-button-dialog"
    data-frok-action="show"
  >
    <span class="a-button__label">Open dialog</span>
  </button>
  <dialog
    class="m-dialog -floating-shadow-s -floating"
    id="default-dialog-with-long-title-without-close-button"
    aria-labelledby="dialog-default-dialog-with-long-title-without-close-button-title"
  >
    <div class="m-dialog__header">
      <div class="m-dialog__title">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo dolorem
        accusamus modi possimus!
      </div>
    </div>
    <hr class="a-divider" />
    <div class="m-dialog__content">
      <div
        class="m-dialog__headline"
        id="dialog-default-dialog-with-long-title-without-close-button-title"
      >
        Content Headline Text XL Bold
      </div>
      <div
        class="m-dialog__body"
        id="dialog-default-dialog-with-long-title-without-close-button-description"
      >
        Paragraph text with style text M. Invidunt ut labore et dolore magna
        aliquyam erat, sed diam voluptua. At vero eos et accusam et jus to duo
        dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
        est Lorem ipsum dolor sit amet.
      </div>
      <div class="m-dialog__actions">
        <button
          type="button"
          class="a-button a-button--primary -without-icon"
          data-frok-action="confirm"
        >
          <span class="a-button__label">Confirm</span>
        </button>
        <button
          type="button"
          class="a-button a-button--secondary -without-icon"
          data-frok-action="cancel"
        >
          <span class="a-button__label">Cancel</span>
        </button>
      </div>
    </div>
  </dialog>
</div>

Default dialog without header

Open on blank page
Content Headline Text XL Bold
Paragraph text with style text M. Invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et jus to duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
<div class="frontend-kit-example_modal-dialog">
  <button
    type="button"
    class="a-button a-button--primary -without-icon a-button-dialog"
    data-frok-action="show"
  >
    <span class="a-button__label">Open dialog</span>
  </button>
  <dialog
    class="m-dialog -floating-shadow-s -floating"
    id="default-dialog-without-header"
    aria-labelledby="dialog-default-dialog-without-header-title"
  >
    <div class="m-dialog__content">
      <div
        class="m-dialog__headline"
        id="dialog-default-dialog-without-header-title"
      >
        Content Headline Text XL Bold
      </div>
      <div
        class="m-dialog__body"
        id="dialog-default-dialog-without-header-description"
      >
        Paragraph text with style text M. Invidunt ut labore et dolore magna
        aliquyam erat, sed diam voluptua. At vero eos et accusam et jus to duo
        dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
        est Lorem ipsum dolor sit amet.
      </div>
      <div class="m-dialog__actions">
        <button
          type="button"
          class="a-button a-button--primary -without-icon"
          data-frok-action="confirm"
        >
          <span class="a-button__label">Confirm</span>
        </button>
        <button
          type="button"
          class="a-button a-button--secondary -without-icon"
          data-frok-action="cancel"
        >
          <span class="a-button__label">Cancel</span>
        </button>
      </div>
    </div>
  </dialog>
</div>

Dialog info

Open on blank page
Info Title Text M Bold
Info Headline Text XL Bold
Paragraph text with style text M. Invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et jus to duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Error code 01 B0 5C H0 23 04
<div class="frontend-kit-example_modal-dialog">
  <button
    type="button"
    class="a-button a-button--primary -without-icon a-button-dialog"
    data-frok-action="show"
  >
    <span class="a-button__label">Open dialog</span>
  </button>
  <dialog
    class="m-dialog -floating-shadow-s -floating"
    id="alert-dialog-info"
    aria-labelledby="dialog-alert-dialog-info-title"
  >
    <div class="m-dialog__remark --info"></div>
    <div class="m-dialog__header">
      <i class="a-icon ui-ic-alert-info"></i>
      <div class="m-dialog__title">Info Title Text M Bold</div>
      <button
        type="button"
        class="a-button a-button--integrated -without-label"
        data-frok-action="close"
        aria-label="close dialog"
      >
        <i class="a-icon a-button__icon ui-ic-close"></i>
      </button>
    </div>
    <hr class="a-divider" />
    <div class="m-dialog__content">
      <div class="m-dialog__headline" id="dialog-alert-dialog-info-title">
        Info Headline Text XL Bold
      </div>
      <div class="m-dialog__body" id="dialog-alert-dialog-info-description">
        Paragraph text with style text M. Invidunt ut labore et dolore magna
        aliquyam erat, sed diam voluptua. At vero eos et accusam et jus to duo
        dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
        est Lorem ipsum dolor sit amet.
      </div>
      <div class="m-dialog__code">Error code 01 B0 5C H0 23 04</div>
      <div class="m-dialog__actions">
        <button
          type="button"
          class="a-button a-button--primary -without-icon"
          data-frok-action="confirm"
        >
          <span class="a-button__label">Confirm</span>
        </button>
        <button
          type="button"
          class="a-button a-button--secondary -without-icon"
          data-frok-action="cancel"
        >
          <span class="a-button__label">Cancel</span>
        </button>
      </div>
    </div>
  </dialog>
</div>

Dialog info without close button

Open on blank page
Info Title Text M Bold
Info Headline Text XL Bold
Paragraph text with style text M. Invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et jus to duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Error code 01 B0 5C H0 23 04
<div class="frontend-kit-example_modal-dialog">
  <button
    type="button"
    class="a-button a-button--primary -without-icon a-button-dialog"
    data-frok-action="show"
  >
    <span class="a-button__label">Open dialog</span>
  </button>
  <dialog
    class="m-dialog -floating-shadow-s -floating"
    id="alert-dialog-info-without-close-button"
    aria-labelledby="dialog-alert-dialog-info-without-close-button-title"
  >
    <div class="m-dialog__remark --info"></div>
    <div class="m-dialog__header">
      <i class="a-icon ui-ic-alert-info"></i>
      <div class="m-dialog__title">Info Title Text M Bold</div>
    </div>
    <hr class="a-divider" />
    <div class="m-dialog__content">
      <div
        class="m-dialog__headline"
        id="dialog-alert-dialog-info-without-close-button-title"
      >
        Info Headline Text XL Bold
      </div>
      <div
        class="m-dialog__body"
        id="dialog-alert-dialog-info-without-close-button-description"
      >
        Paragraph text with style text M. Invidunt ut labore et dolore magna
        aliquyam erat, sed diam voluptua. At vero eos et accusam et jus to duo
        dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
        est Lorem ipsum dolor sit amet.
      </div>
      <div class="m-dialog__code">Error code 01 B0 5C H0 23 04</div>
      <div class="m-dialog__actions">
        <button
          type="button"
          class="a-button a-button--primary -without-icon"
          data-frok-action="confirm"
        >
          <span class="a-button__label">Confirm</span>
        </button>
        <button
          type="button"
          class="a-button a-button--secondary -without-icon"
          data-frok-action="cancel"
        >
          <span class="a-button__label">Cancel</span>
        </button>
      </div>
    </div>
  </dialog>
</div>

Dialog success

Open on blank page
Success Title Text M Bold
Success Headline Text XL Bold
Paragraph text with style text M. Invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et jus to duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
<div class="frontend-kit-example_modal-dialog">
  <button
    type="button"
    class="a-button a-button--primary -without-icon a-button-dialog"
    data-frok-action="show"
  >
    <span class="a-button__label">Open dialog</span>
  </button>
  <dialog
    class="m-dialog -floating-shadow-s -floating"
    id="alert-dialog-success"
    aria-labelledby="dialog-alert-dialog-success-title"
  >
    <div class="m-dialog__remark --success"></div>
    <div class="m-dialog__header">
      <i class="a-icon ui-ic-alert-success"></i>
      <div class="m-dialog__title">Success Title Text M Bold</div>
      <button
        type="button"
        class="a-button a-button--integrated -without-label"
        data-frok-action="close"
        aria-label="close dialog"
      >
        <i class="a-icon a-button__icon ui-ic-close"></i>
      </button>
    </div>
    <hr class="a-divider" />
    <div class="m-dialog__content">
      <div class="m-dialog__headline" id="dialog-alert-dialog-success-title">
        Success Headline Text XL Bold
      </div>
      <div class="m-dialog__body" id="dialog-alert-dialog-success-description">
        Paragraph text with style text M. Invidunt ut labore et dolore magna
        aliquyam erat, sed diam voluptua. At vero eos et accusam et jus to duo
        dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
        est Lorem ipsum dolor sit amet.
      </div>
      <div class="m-dialog__actions">
        <button
          type="button"
          class="a-button a-button--primary -without-icon"
          data-frok-action="confirm"
        >
          <span class="a-button__label">Confirm</span>
        </button>
        <button
          type="button"
          class="a-button a-button--secondary -without-icon"
          data-frok-action="cancel"
        >
          <span class="a-button__label">Cancel</span>
        </button>
      </div>
    </div>
  </dialog>
</div>

Dialog success without close button

Open on blank page
Success Title Text M Bold
Success Headline Text XL Bold
Paragraph text with style text M. Invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et jus to duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
<div class="frontend-kit-example_modal-dialog">
  <button
    type="button"
    class="a-button a-button--primary -without-icon a-button-dialog"
    data-frok-action="show"
  >
    <span class="a-button__label">Open dialog</span>
  </button>
  <dialog
    class="m-dialog -floating-shadow-s -floating"
    id="alert-dialog-success-without-close-button"
    aria-labelledby="dialog-alert-dialog-success-without-close-button-title"
  >
    <div class="m-dialog__remark --success"></div>
    <div class="m-dialog__header">
      <i class="a-icon ui-ic-alert-success"></i>
      <div class="m-dialog__title">Success Title Text M Bold</div>
    </div>
    <hr class="a-divider" />
    <div class="m-dialog__content">
      <div
        class="m-dialog__headline"
        id="dialog-alert-dialog-success-without-close-button-title"
      >
        Success Headline Text XL Bold
      </div>
      <div
        class="m-dialog__body"
        id="dialog-alert-dialog-success-without-close-button-description"
      >
        Paragraph text with style text M. Invidunt ut labore et dolore magna
        aliquyam erat, sed diam voluptua. At vero eos et accusam et jus to duo
        dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
        est Lorem ipsum dolor sit amet.
      </div>
      <div class="m-dialog__actions">
        <button
          type="button"
          class="a-button a-button--primary -without-icon"
          data-frok-action="confirm"
        >
          <span class="a-button__label">Confirm</span>
        </button>
        <button
          type="button"
          class="a-button a-button--secondary -without-icon"
          data-frok-action="cancel"
        >
          <span class="a-button__label">Cancel</span>
        </button>
      </div>
    </div>
  </dialog>
</div>

Dialog warning

Open on blank page
Warning Title Text M Bold
Warning Headline Text XL Bold
Paragraph text with style text M. Invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et jus to duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Error code 01 B0 5C H0 23 04
<div class="frontend-kit-example_modal-dialog">
  <button
    type="button"
    class="a-button a-button--primary -without-icon a-button-dialog"
    data-frok-action="show"
  >
    <span class="a-button__label">Open dialog</span>
  </button>
  <dialog
    class="m-dialog -floating-shadow-s -floating"
    id="alert-dialog-warning"
    aria-labelledby="dialog-alert-dialog-warning-title"
  >
    <div class="m-dialog__remark --warning"></div>
    <div class="m-dialog__header">
      <i class="a-icon ui-ic-alert-warning"></i>
      <div class="m-dialog__title">Warning Title Text M Bold</div>
      <button
        type="button"
        class="a-button a-button--integrated -without-label"
        data-frok-action="close"
        aria-label="close dialog"
      >
        <i class="a-icon a-button__icon ui-ic-close"></i>
      </button>
    </div>
    <hr class="a-divider" />
    <div class="m-dialog__content">
      <div class="m-dialog__headline" id="dialog-alert-dialog-warning-title">
        Warning Headline Text XL Bold
      </div>
      <div class="m-dialog__body" id="dialog-alert-dialog-warning-description">
        Paragraph text with style text M. Invidunt ut labore et dolore magna
        aliquyam erat, sed diam voluptua. At vero eos et accusam et jus to duo
        dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
        est Lorem ipsum dolor sit amet.
      </div>
      <div class="m-dialog__code">Error code 01 B0 5C H0 23 04</div>
      <div class="m-dialog__actions">
        <button
          type="button"
          class="a-button a-button--primary -without-icon"
          data-frok-action="confirm"
        >
          <span class="a-button__label">Confirm</span>
        </button>
        <button
          type="button"
          class="a-button a-button--secondary -without-icon"
          data-frok-action="cancel"
        >
          <span class="a-button__label">Cancel</span>
        </button>
      </div>
    </div>
  </dialog>
</div>

Dialog warning without close button

Open on blank page
Warning Title Text M Bold
Warning Headline Text XL Bold
Paragraph text with style text M. Invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et jus to duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Error code 01 B0 5C H0 23 04
<div class="frontend-kit-example_modal-dialog">
  <button
    type="button"
    class="a-button a-button--primary -without-icon a-button-dialog"
    data-frok-action="show"
  >
    <span class="a-button__label">Open dialog</span>
  </button>
  <dialog
    class="m-dialog -floating-shadow-s -floating"
    id="alert-dialog-warning-without-close-button"
    aria-labelledby="dialog-alert-dialog-warning-without-close-button-title"
  >
    <div class="m-dialog__remark --warning"></div>
    <div class="m-dialog__header">
      <i class="a-icon ui-ic-alert-warning"></i>
      <div class="m-dialog__title">Warning Title Text M Bold</div>
    </div>
    <hr class="a-divider" />
    <div class="m-dialog__content">
      <div
        class="m-dialog__headline"
        id="dialog-alert-dialog-warning-without-close-button-title"
      >
        Warning Headline Text XL Bold
      </div>
      <div
        class="m-dialog__body"
        id="dialog-alert-dialog-warning-without-close-button-description"
      >
        Paragraph text with style text M. Invidunt ut labore et dolore magna
        aliquyam erat, sed diam voluptua. At vero eos et accusam et jus to duo
        dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
        est Lorem ipsum dolor sit amet.
      </div>
      <div class="m-dialog__code">Error code 01 B0 5C H0 23 04</div>
      <div class="m-dialog__actions">
        <button
          type="button"
          class="a-button a-button--primary -without-icon"
          data-frok-action="confirm"
        >
          <span class="a-button__label">Confirm</span>
        </button>
        <button
          type="button"
          class="a-button a-button--secondary -without-icon"
          data-frok-action="cancel"
        >
          <span class="a-button__label">Cancel</span>
        </button>
      </div>
    </div>
  </dialog>
</div>

Dialog error

Open on blank page
Error Title Text M Bold
Error Headline Text XL Bold
Paragraph text with style text M. Invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et jus to duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Error code 01 B0 5C H0 23 04
<div class="frontend-kit-example_modal-dialog">
  <button
    type="button"
    class="a-button a-button--primary -without-icon a-button-dialog"
    data-frok-action="show"
  >
    <span class="a-button__label">Open dialog</span>
  </button>
  <dialog
    class="m-dialog -floating-shadow-s -floating"
    id="alert-dialog-error"
    aria-labelledby="dialog-alert-dialog-error-title"
  >
    <div class="m-dialog__remark --error"></div>
    <div class="m-dialog__header">
      <i class="a-icon ui-ic-alert-error"></i>
      <div class="m-dialog__title">Error Title Text M Bold</div>
      <button
        type="button"
        class="a-button a-button--integrated -without-label"
        data-frok-action="close"
        aria-label="close dialog"
      >
        <i class="a-icon a-button__icon ui-ic-close"></i>
      </button>
    </div>
    <hr class="a-divider" />
    <div class="m-dialog__content">
      <div class="m-dialog__headline" id="dialog-alert-dialog-error-title">
        Error Headline Text XL Bold
      </div>
      <div class="m-dialog__body" id="dialog-alert-dialog-error-description">
        Paragraph text with style text M. Invidunt ut labore et dolore magna
        aliquyam erat, sed diam voluptua. At vero eos et accusam et jus to duo
        dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
        est Lorem ipsum dolor sit amet.
      </div>
      <div class="m-dialog__code">Error code 01 B0 5C H0 23 04</div>
      <div class="m-dialog__actions">
        <button
          type="button"
          class="a-button a-button--primary -without-icon"
          data-frok-action="confirm"
        >
          <span class="a-button__label">Confirm</span>
        </button>
        <button
          type="button"
          class="a-button a-button--secondary -without-icon"
          data-frok-action="cancel"
        >
          <span class="a-button__label">Cancel</span>
        </button>
      </div>
    </div>
  </dialog>
</div>

Dialog error without close button

Open on blank page
Error Title Text M Bold
Error Headline Text XL Bold
Paragraph text with style text M. Invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et jus to duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Error code 01 B0 5C H0 23 04
<div class="frontend-kit-example_modal-dialog">
  <button
    type="button"
    class="a-button a-button--primary -without-icon a-button-dialog"
    data-frok-action="show"
  >
    <span class="a-button__label">Open dialog</span>
  </button>
  <dialog
    class="m-dialog -floating-shadow-s -floating"
    id="alert-dialog-error-without-close-button"
    aria-labelledby="dialog-alert-dialog-error-without-close-button-title"
  >
    <div class="m-dialog__remark --error"></div>
    <div class="m-dialog__header">
      <i class="a-icon ui-ic-alert-error"></i>
      <div class="m-dialog__title">Error Title Text M Bold</div>
    </div>
    <hr class="a-divider" />
    <div class="m-dialog__content">
      <div
        class="m-dialog__headline"
        id="dialog-alert-dialog-error-without-close-button-title"
      >
        Error Headline Text XL Bold
      </div>
      <div
        class="m-dialog__body"
        id="dialog-alert-dialog-error-without-close-button-description"
      >
        Paragraph text with style text M. Invidunt ut labore et dolore magna
        aliquyam erat, sed diam voluptua. At vero eos et accusam et jus to duo
        dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
        est Lorem ipsum dolor sit amet.
      </div>
      <div class="m-dialog__code">Error code 01 B0 5C H0 23 04</div>
      <div class="m-dialog__actions">
        <button
          type="button"
          class="a-button a-button--primary -without-icon"
          data-frok-action="confirm"
        >
          <span class="a-button__label">Confirm</span>
        </button>
        <button
          type="button"
          class="a-button a-button--secondary -without-icon"
          data-frok-action="cancel"
        >
          <span class="a-button__label">Cancel</span>
        </button>
      </div>
    </div>
  </dialog>
</div>

Dialog Non-Modal

Open on blank page
Non-Modal Title Text M Bold
Non-Modal Headline Text XL Bold
Paragraph text with style text M. Invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et jus to duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
<div class="frontend-kit-example_modal-dialog">
  <button
    type="button"
    class="a-button a-button--primary -without-icon a-button-dialog"
    data-frok-action="show"
  >
    <span class="a-button__label">Open dialog</span>
  </button>
  <dialog
    class="m-dialog -floating-shadow-s -floating -non-modal"
    id="dialog-non-modal"
    aria-labelledby="dialog-dialog-non-modal-title"
  >
    <div class="m-dialog__header">
      <div class="m-dialog__title">Non-Modal Title Text M Bold</div>
    </div>
    <hr class="a-divider" />
    <div class="m-dialog__content">
      <div class="m-dialog__headline" id="dialog-dialog-non-modal-title">
        Non-Modal Headline Text XL Bold
      </div>
      <div class="m-dialog__body" id="dialog-dialog-non-modal-description">
        Paragraph text with style text M. Invidunt ut labore et dolore magna
        aliquyam erat, sed diam voluptua. At vero eos et accusam et jus to duo
        dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
        est Lorem ipsum dolor sit amet.
      </div>
      <div class="m-dialog__actions">
        <button
          type="button"
          class="a-button a-button--primary -without-icon"
          data-frok-action="confirm"
        >
          <span class="a-button__label">Confirm</span>
        </button>
        <button
          type="button"
          class="a-button a-button--secondary -without-icon"
          data-frok-action="cancel"
        >
          <span class="a-button__label">Cancel</span>
        </button>
      </div>
    </div>
  </dialog>
</div>

Dialog Modal-less

This component is only meant to be used in a full page and won't render / behave correctly here. Please use the button below (Open on blank page) to see the component in action.
Open on blank page
<dialog
  class="m-dialog -floating-shadow-s -floating"
  id="dialog-modal-less-dialog"
  aria-labelledby="dialog-dialog-modal-less-dialog-title"
  open=""
>
  <div class="m-dialog__header">
    <div class="m-dialog__title">Modal-less Title Text M Bold</div>
  </div>
  <hr class="a-divider" />
  <div class="m-dialog__content">
    <div class="m-dialog__headline" id="dialog-dialog-modal-less-dialog-title">
      Modal-less Headline Text XL Bold
    </div>
    <div
      class="m-dialog__body"
      id="dialog-dialog-modal-less-dialog-description"
    >
      Paragraph text with style text M. Invidunt ut labore et dolore magna
      aliquyam erat, sed diam voluptua. At vero eos et accusam et jus to duo
      dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
      est Lorem ipsum dolor sit amet.
    </div>
    <div class="m-dialog__actions">
      <button
        type="button"
        class="a-button a-button--primary -without-icon"
        data-frok-action="confirm"
      >
        <span class="a-button__label">Confirm</span>
      </button>
      <button
        type="button"
        class="a-button a-button--secondary -without-icon"
        data-frok-action="cancel"
      >
        <span class="a-button__label">Cancel</span>
      </button>
    </div>
  </div>
</dialog>

All Dialog demonstrator

Open on blank page
Default example
Default example
Paragraph text with style text M. Invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et jus to duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Default without close button example
Default without close button example
Paragraph text with style text M. Invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et jus to duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo dolorem accusamus modi possimus!
Default dialog with long title
Paragraph text with style text M. Invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et jus to duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo dolorem accusamus modi possimus!
Default dialog with long title without close button
Paragraph text with style text M. Invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et jus to duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Default dialog without header
Paragraph text with style text M. Invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et jus to duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Info Title Text M Bold
Info Headline Text XL Bold
Paragraph text with style text M. Invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et jus to duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Success Title Text M Bold
Success Headline Text XL Bold
Paragraph text with style text M. Invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et jus to duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Warning Title Text M Bold
Warning Headline Text XL Bold
Paragraph text with style text M. Invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et jus to duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Error Title Text M Bold
Error Headline Text XL Bold
Paragraph text with style text M. Invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et jus to duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Info Title Text M Bold
Info Headline Text XL Bold
Paragraph text with style text M. Invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et jus to duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Success Title Text M Bold
Success Headline Text XL Bold
Paragraph text with style text M. Invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et jus to duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Warning Title Text M Bold
Warning Headline Text XL Bold
Paragraph text with style text M. Invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et jus to duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Non-Modal
Non-Modal
Paragraph text with style text M. Invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et jus to duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
<div
  class="frontend-kit-example_modal-dialog"
  style="display:grid;grid-template-columns:repeat(4, 1fr);gap:1.5rem"
>
  <button
    type="button"
    class="a-button-dialog a-button a-button--primary -without-icon"
  >
    <span class="a-button__label">Default</span>
  </button>
  <dialog
    class="m-dialog -floating-shadow-s -floating"
    id="demo-default"
    aria-labelledby="dialog-demo-default-title"
  >
    <div class="m-dialog__header">
      <div class="m-dialog__title">Default example</div>
      <button
        type="button"
        class="a-button a-button--integrated -without-label"
        data-frok-action="close"
        aria-label="close dialog"
      >
        <i class="a-icon a-button__icon ui-ic-close"></i>
      </button>
    </div>
    <hr class="a-divider" />
    <div class="m-dialog__content">
      <div class="m-dialog__headline" id="dialog-demo-default-title">
        Default example
      </div>
      <div class="m-dialog__body" id="dialog-demo-default-description">
        Paragraph text with style text M. Invidunt ut labore et dolore magna
        aliquyam erat, sed diam voluptua. At vero eos et accusam et jus to duo
        dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
        est Lorem ipsum dolor sit amet.
      </div>
      <div class="m-dialog__actions">
        <button
          type="button"
          class="a-button a-button--primary -without-icon"
          data-frok-action="confirm"
        >
          <span class="a-button__label">Confirm</span>
        </button>
        <button
          type="button"
          class="a-button a-button--secondary -without-icon"
          data-frok-action="cancel"
        >
          <span class="a-button__label">Cancel</span>
        </button>
      </div>
    </div>
  </dialog>
  <button
    type="button"
    class="a-button-dialog a-button a-button--primary -without-icon"
  >
    <span class="a-button__label">Default without close button</span>
  </button>
  <dialog
    class="m-dialog -floating-shadow-s -floating"
    id="demo-default-dialog-without-close-button"
    aria-labelledby="dialog-demo-default-dialog-without-close-button-title"
  >
    <div class="m-dialog__header">
      <div class="m-dialog__title">Default without close button example</div>
    </div>
    <hr class="a-divider" />
    <div class="m-dialog__content">
      <div
        class="m-dialog__headline"
        id="dialog-demo-default-dialog-without-close-button-title"
      >
        Default without close button example
      </div>
      <div
        class="m-dialog__body"
        id="dialog-demo-default-dialog-without-close-button-description"
      >
        Paragraph text with style text M. Invidunt ut labore et dolore magna
        aliquyam erat, sed diam voluptua. At vero eos et accusam et jus to duo
        dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
        est Lorem ipsum dolor sit amet.
      </div>
      <div class="m-dialog__actions">
        <button
          type="button"
          class="a-button a-button--primary -without-icon"
          data-frok-action="confirm"
        >
          <span class="a-button__label">Confirm</span>
        </button>
        <button
          type="button"
          class="a-button a-button--secondary -without-icon"
          data-frok-action="cancel"
        >
          <span class="a-button__label">Cancel</span>
        </button>
      </div>
    </div>
  </dialog>
  <button
    type="button"
    class="a-button-dialog a-button a-button--primary -without-icon"
  >
    <span class="a-button__label">Default dialog with long title</span>
  </button>
  <dialog
    class="m-dialog -floating-shadow-s -floating"
    id="demo-default-dialog-with-long-title"
    aria-labelledby="dialog-demo-default-dialog-with-long-title-title"
  >
    <div class="m-dialog__header">
      <div class="m-dialog__title">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo dolorem
        accusamus modi possimus!
      </div>
      <button
        type="button"
        class="a-button a-button--integrated -without-label"
        data-frok-action="close"
        aria-label="close dialog"
      >
        <i class="a-icon a-button__icon ui-ic-close"></i>
      </button>
    </div>
    <hr class="a-divider" />
    <div class="m-dialog__content">
      <div
        class="m-dialog__headline"
        id="dialog-demo-default-dialog-with-long-title-title"
      >
        Default dialog with long title
      </div>
      <div
        class="m-dialog__body"
        id="dialog-demo-default-dialog-with-long-title-description"
      >
        Paragraph text with style text M. Invidunt ut labore et dolore magna
        aliquyam erat, sed diam voluptua. At vero eos et accusam et jus to duo
        dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
        est Lorem ipsum dolor sit amet.
      </div>
      <div class="m-dialog__actions">
        <button
          type="button"
          class="a-button a-button--primary -without-icon"
          data-frok-action="confirm"
        >
          <span class="a-button__label">Confirm</span>
        </button>
        <button
          type="button"
          class="a-button a-button--secondary -without-icon"
          data-frok-action="cancel"
        >
          <span class="a-button__label">Cancel</span>
        </button>
      </div>
    </div>
  </dialog>
  <button
    type="button"
    class="a-button-dialog a-button a-button--primary -without-icon"
  >
    <span class="a-button__label">
      Default dialog with long title without close button
    </span>
  </button>
  <dialog
    class="m-dialog -floating-shadow-s -floating"
    id="demo-default-dialog-with-long-title-without-close-button"
    aria-labelledby="dialog-demo-default-dialog-with-long-title-without-close-button-title"
  >
    <div class="m-dialog__header">
      <div class="m-dialog__title">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo dolorem
        accusamus modi possimus!
      </div>
    </div>
    <hr class="a-divider" />
    <div class="m-dialog__content">
      <div
        class="m-dialog__headline"
        id="dialog-demo-default-dialog-with-long-title-without-close-button-title"
      >
        Default dialog with long title without close button
      </div>
      <div
        class="m-dialog__body"
        id="dialog-demo-default-dialog-with-long-title-without-close-button-description"
      >
        Paragraph text with style text M. Invidunt ut labore et dolore magna
        aliquyam erat, sed diam voluptua. At vero eos et accusam et jus to duo
        dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
        est Lorem ipsum dolor sit amet.
      </div>
      <div class="m-dialog__actions">
        <button
          type="button"
          class="a-button a-button--primary -without-icon"
          data-frok-action="confirm"
        >
          <span class="a-button__label">Confirm</span>
        </button>
        <button
          type="button"
          class="a-button a-button--secondary -without-icon"
          data-frok-action="cancel"
        >
          <span class="a-button__label">Cancel</span>
        </button>
      </div>
    </div>
  </dialog>
  <button
    type="button"
    class="a-button-dialog a-button a-button--primary -without-icon"
  >
    <span class="a-button__label">Default dialog without header</span>
  </button>
  <dialog
    class="m-dialog -floating-shadow-s -floating"
    id="demo-default-dialog-without-header"
    aria-labelledby="dialog-demo-default-dialog-without-header-title"
  >
    <div class="m-dialog__content">
      <div
        class="m-dialog__headline"
        id="dialog-demo-default-dialog-without-header-title"
      >
        Default dialog without header
      </div>
      <div
        class="m-dialog__body"
        id="dialog-demo-default-dialog-without-header-description"
      >
        Paragraph text with style text M. Invidunt ut labore et dolore magna
        aliquyam erat, sed diam voluptua. At vero eos et accusam et jus to duo
        dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
        est Lorem ipsum dolor sit amet.
      </div>
      <div class="m-dialog__actions">
        <button
          type="button"
          class="a-button a-button--primary -without-icon"
          data-frok-action="confirm"
        >
          <span class="a-button__label">Confirm</span>
        </button>
        <button
          type="button"
          class="a-button a-button--secondary -without-icon"
          data-frok-action="cancel"
        >
          <span class="a-button__label">Cancel</span>
        </button>
      </div>
    </div>
  </dialog>
  <button
    type="button"
    class="a-button-dialog a-button a-button--primary -without-icon"
  >
    <span class="a-button__label">Info</span>
  </button>
  <dialog
    class="m-dialog -floating-shadow-s -floating"
    id="demo-alert-dialog-info"
    aria-labelledby="dialog-demo-alert-dialog-info-title"
  >
    <div class="m-dialog__remark --info"></div>
    <div class="m-dialog__header">
      <i class="a-icon ui-ic-alert-info"></i>
      <div class="m-dialog__title">Info Title Text M Bold</div>
      <button
        type="button"
        class="a-button a-button--integrated -without-label"
        data-frok-action="close"
        aria-label="close dialog"
      >
        <i class="a-icon a-button__icon ui-ic-close"></i>
      </button>
    </div>
    <hr class="a-divider" />
    <div class="m-dialog__content">
      <div class="m-dialog__headline" id="dialog-demo-alert-dialog-info-title">
        Info Headline Text XL Bold
      </div>
      <div
        class="m-dialog__body"
        id="dialog-demo-alert-dialog-info-description"
      >
        Paragraph text with style text M. Invidunt ut labore et dolore magna
        aliquyam erat, sed diam voluptua. At vero eos et accusam et jus to duo
        dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
        est Lorem ipsum dolor sit amet.
      </div>
      <div class="m-dialog__actions">
        <button
          type="button"
          class="a-button a-button--primary -without-icon"
          data-frok-action="confirm"
        >
          <span class="a-button__label">Confirm</span>
        </button>
        <button
          type="button"
          class="a-button a-button--secondary -without-icon"
          data-frok-action="cancel"
        >
          <span class="a-button__label">Cancel</span>
        </button>
      </div>
    </div>
  </dialog>
  <button
    type="button"
    class="a-button-dialog a-button a-button--primary -without-icon"
  >
    <span class="a-button__label">Success</span>
  </button>
  <dialog
    class="m-dialog -floating-shadow-s -floating"
    id="demo-alert-dialog-success"
    aria-labelledby="dialog-demo-alert-dialog-success-title"
  >
    <div class="m-dialog__remark --success"></div>
    <div class="m-dialog__header">
      <i class="a-icon ui-ic-alert-success"></i>
      <div class="m-dialog__title">Success Title Text M Bold</div>
      <button
        type="button"
        class="a-button a-button--integrated -without-label"
        data-frok-action="close"
        aria-label="close dialog"
      >
        <i class="a-icon a-button__icon ui-ic-close"></i>
      </button>
    </div>
    <hr class="a-divider" />
    <div class="m-dialog__content">
      <div
        class="m-dialog__headline"
        id="dialog-demo-alert-dialog-success-title"
      >
        Success Headline Text XL Bold
      </div>
      <div
        class="m-dialog__body"
        id="dialog-demo-alert-dialog-success-description"
      >
        Paragraph text with style text M. Invidunt ut labore et dolore magna
        aliquyam erat, sed diam voluptua. At vero eos et accusam et jus to duo
        dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
        est Lorem ipsum dolor sit amet.
      </div>
      <div class="m-dialog__actions">
        <button
          type="button"
          class="a-button a-button--primary -without-icon"
          data-frok-action="confirm"
        >
          <span class="a-button__label">Confirm</span>
        </button>
        <button
          type="button"
          class="a-button a-button--secondary -without-icon"
          data-frok-action="cancel"
        >
          <span class="a-button__label">Cancel</span>
        </button>
      </div>
    </div>
  </dialog>
  <button
    type="button"
    class="a-button-dialog a-button a-button--primary -without-icon"
  >
    <span class="a-button__label">Warning</span>
  </button>
  <dialog
    class="m-dialog -floating-shadow-s -floating"
    id="demo-alert-dialog-warning"
    aria-labelledby="dialog-demo-alert-dialog-warning-title"
  >
    <div class="m-dialog__remark --warning"></div>
    <div class="m-dialog__header">
      <i class="a-icon ui-ic-alert-warning"></i>
      <div class="m-dialog__title">Warning Title Text M Bold</div>
      <button
        type="button"
        class="a-button a-button--integrated -without-label"
        data-frok-action="close"
        aria-label="close dialog"
      >
        <i class="a-icon a-button__icon ui-ic-close"></i>
      </button>
    </div>
    <hr class="a-divider" />
    <div class="m-dialog__content">
      <div
        class="m-dialog__headline"
        id="dialog-demo-alert-dialog-warning-title"
      >
        Warning Headline Text XL Bold
      </div>
      <div
        class="m-dialog__body"
        id="dialog-demo-alert-dialog-warning-description"
      >
        Paragraph text with style text M. Invidunt ut labore et dolore magna
        aliquyam erat, sed diam voluptua. At vero eos et accusam et jus to duo
        dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
        est Lorem ipsum dolor sit amet.
      </div>
      <div class="m-dialog__actions">
        <button
          type="button"
          class="a-button a-button--primary -without-icon"
          data-frok-action="confirm"
        >
          <span class="a-button__label">Confirm</span>
        </button>
        <button
          type="button"
          class="a-button a-button--secondary -without-icon"
          data-frok-action="cancel"
        >
          <span class="a-button__label">Cancel</span>
        </button>
      </div>
    </div>
  </dialog>
  <button
    type="button"
    class="a-button-dialog a-button a-button--primary -without-icon"
  >
    <span class="a-button__label">Error</span>
  </button>
  <dialog
    class="m-dialog -floating-shadow-s -floating"
    id="demo-alert-dialog-error"
    aria-labelledby="dialog-demo-alert-dialog-error-title"
  >
    <div class="m-dialog__remark --error"></div>
    <div class="m-dialog__header">
      <i class="a-icon ui-ic-alert-error"></i>
      <div class="m-dialog__title">Error Title Text M Bold</div>
      <button
        type="button"
        class="a-button a-button--integrated -without-label"
        data-frok-action="close"
        aria-label="close dialog"
      >
        <i class="a-icon a-button__icon ui-ic-close"></i>
      </button>
    </div>
    <hr class="a-divider" />
    <div class="m-dialog__content">
      <div class="m-dialog__headline" id="dialog-demo-alert-dialog-error-title">
        Error Headline Text XL Bold
      </div>
      <div
        class="m-dialog__body"
        id="dialog-demo-alert-dialog-error-description"
      >
        Paragraph text with style text M. Invidunt ut labore et dolore magna
        aliquyam erat, sed diam voluptua. At vero eos et accusam et jus to duo
        dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
        est Lorem ipsum dolor sit amet.
      </div>
      <div class="m-dialog__actions">
        <button
          type="button"
          class="a-button a-button--primary -without-icon"
          data-frok-action="confirm"
        >
          <span class="a-button__label">Confirm</span>
        </button>
        <button
          type="button"
          class="a-button a-button--secondary -without-icon"
          data-frok-action="cancel"
        >
          <span class="a-button__label">Cancel</span>
        </button>
      </div>
    </div>
  </dialog>
  <button
    type="button"
    class="a-button-dialog a-button a-button--primary -without-icon"
  >
    <span class="a-button__label">Info without close button</span>
  </button>
  <dialog
    class="m-dialog -floating-shadow-s -floating"
    id="demo-alert-dialog-info-without-close-button"
    aria-labelledby="dialog-demo-alert-dialog-info-without-close-button-title"
  >
    <div class="m-dialog__remark --info"></div>
    <div class="m-dialog__header">
      <i class="a-icon ui-ic-alert-info"></i>
      <div class="m-dialog__title">Info Title Text M Bold</div>
    </div>
    <hr class="a-divider" />
    <div class="m-dialog__content">
      <div
        class="m-dialog__headline"
        id="dialog-demo-alert-dialog-info-without-close-button-title"
      >
        Info Headline Text XL Bold
      </div>
      <div
        class="m-dialog__body"
        id="dialog-demo-alert-dialog-info-without-close-button-description"
      >
        Paragraph text with style text M. Invidunt ut labore et dolore magna
        aliquyam erat, sed diam voluptua. At vero eos et accusam et jus to duo
        dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
        est Lorem ipsum dolor sit amet.
      </div>
      <div class="m-dialog__actions">
        <button
          type="button"
          class="a-button a-button--primary -without-icon"
          data-frok-action="confirm"
        >
          <span class="a-button__label">Confirm</span>
        </button>
        <button
          type="button"
          class="a-button a-button--secondary -without-icon"
          data-frok-action="cancel"
        >
          <span class="a-button__label">Cancel</span>
        </button>
      </div>
    </div>
  </dialog>
  <button
    type="button"
    class="a-button-dialog a-button a-button--primary -without-icon"
  >
    <span class="a-button__label">Success without close button</span>
  </button>
  <dialog
    class="m-dialog -floating-shadow-s -floating"
    id="demo-alert-dialog-success-without-close-button"
    aria-labelledby="dialog-demo-alert-dialog-success-without-close-button-title"
  >
    <div class="m-dialog__remark --success"></div>
    <div class="m-dialog__header">
      <i class="a-icon ui-ic-alert-success"></i>
      <div class="m-dialog__title">Success Title Text M Bold</div>
    </div>
    <hr class="a-divider" />
    <div class="m-dialog__content">
      <div
        class="m-dialog__headline"
        id="dialog-demo-alert-dialog-success-without-close-button-title"
      >
        Success Headline Text XL Bold
      </div>
      <div
        class="m-dialog__body"
        id="dialog-demo-alert-dialog-success-without-close-button-description"
      >
        Paragraph text with style text M. Invidunt ut labore et dolore magna
        aliquyam erat, sed diam voluptua. At vero eos et accusam et jus to duo
        dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
        est Lorem ipsum dolor sit amet.
      </div>
      <div class="m-dialog__actions">
        <button
          type="button"
          class="a-button a-button--primary -without-icon"
          data-frok-action="confirm"
        >
          <span class="a-button__label">Confirm</span>
        </button>
        <button
          type="button"
          class="a-button a-button--secondary -without-icon"
          data-frok-action="cancel"
        >
          <span class="a-button__label">Cancel</span>
        </button>
      </div>
    </div>
  </dialog>
  <button
    type="button"
    class="a-button-dialog a-button a-button--primary -without-icon"
  >
    <span class="a-button__label">Warning without close button</span>
  </button>
  <dialog
    class="m-dialog -floating-shadow-s -floating"
    id="demo-alert-dialog-warning-without-close-button"
    aria-labelledby="dialog-demo-alert-dialog-warning-without-close-button-title"
  >
    <div class="m-dialog__remark --warning"></div>
    <div class="m-dialog__header">
      <i class="a-icon ui-ic-alert-warning"></i>
      <div class="m-dialog__title">Warning Title Text M Bold</div>
    </div>
    <hr class="a-divider" />
    <div class="m-dialog__content">
      <div
        class="m-dialog__headline"
        id="dialog-demo-alert-dialog-warning-without-close-button-title"
      >
        Warning Headline Text XL Bold
      </div>
      <div
        class="m-dialog__body"
        id="dialog-demo-alert-dialog-warning-without-close-button-description"
      >
        Paragraph text with style text M. Invidunt ut labore et dolore magna
        aliquyam erat, sed diam voluptua. At vero eos et accusam et jus to duo
        dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
        est Lorem ipsum dolor sit amet.
      </div>
      <div class="m-dialog__actions">
        <button
          type="button"
          class="a-button a-button--primary -without-icon"
          data-frok-action="confirm"
        >
          <span class="a-button__label">Confirm</span>
        </button>
        <button
          type="button"
          class="a-button a-button--secondary -without-icon"
          data-frok-action="cancel"
        >
          <span class="a-button__label">Cancel</span>
        </button>
      </div>
    </div>
  </dialog>
  <button
    type="button"
    class="a-button-dialog a-button a-button--primary -without-icon"
  >
    <span class="a-button__label">Non-Modal</span>
  </button>
  <dialog
    class="m-dialog -floating-shadow-s -floating"
    id="demo-non-modal"
    aria-labelledby="dialog-demo-non-modal-title"
  >
    <div class="m-dialog__header">
      <div class="m-dialog__title">Non-Modal</div>
    </div>
    <hr class="a-divider" />
    <div class="m-dialog__content">
      <div class="m-dialog__headline" id="dialog-demo-non-modal-title">
        Non-Modal
      </div>
      <div class="m-dialog__body" id="dialog-demo-non-modal-description">
        Paragraph text with style text M. Invidunt ut labore et dolore magna
        aliquyam erat, sed diam voluptua. At vero eos et accusam et jus to duo
        dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
        est Lorem ipsum dolor sit amet.
      </div>
      <div class="m-dialog__actions">
        <button
          type="button"
          class="a-button a-button--primary -without-icon"
          data-frok-action="confirm"
        >
          <span class="a-button__label">Confirm</span>
        </button>
        <button
          type="button"
          class="a-button a-button--secondary -without-icon"
          data-frok-action="cancel"
        >
          <span class="a-button__label">Cancel</span>
        </button>
      </div>
    </div>
  </dialog>
</div>

additional content

demo

export default (): void => {
  const dialogExamples = document.getElementsByClassName(
    'frontend-kit-example_modal-dialog',
  );

  Array.from(dialogExamples).forEach((container) => {
    const triggers = Array.from(
      container.getElementsByClassName('a-button-dialog'),
    ) as HTMLButtonElement[];
    const dialogs = Array.from(
      container.querySelectorAll(
        'dialog[id^="demo-default"], dialog[id^="demo-alert-dialog"], dialog[id^="demo-dialog-non-modal"], dialog[id^="default"], dialog[id^="alert-dialog"], dialog[id^="dialog-non-modal"]',
      ),
    ) as HTMLDialogElement[];

    triggers.forEach((trigger, index) => {
      trigger.addEventListener('click', () => {
        const dialogId = dialogs[index].id;

        if (dialogId.startsWith('modal')) {
          dialogs[index].show();
        } else {
          dialogs[index].showModal();
        }

        if (dialogId.startsWith('non-modal')) {
          dialogs[index].addEventListener('click', (e) => {
            const dialogDimensions = dialogs[index].getBoundingClientRect();
            if (
              e.clientX < dialogDimensions.left ||
              e.clientX > dialogDimensions.right ||
              e.clientY < dialogDimensions.top ||
              e.clientY > dialogDimensions.bottom
            ) {
              dialogs[index].close();
            }
          });
        }
      });
    });
  });
};

styles SCSS

dialog {
  display: none;

  &[open] {
    --max-dialog-width: 44rem;

    background: var(--background);
    border: 0;
    color: var(--plain__enabled__front__default);
    display: grid;
    grid-template-rows: repeat(3, auto) 1fr;
    grid-template-columns: minmax(auto, var(--max-dialog-width));
    grid-template-areas: 'remark'
      'header'
      'divider'
      'content';
    max-height: calc(100vh - 4rem);
    max-width: var(--max-dialog-width);
    overflow: hidden;
    padding: 0;
  }

  &::backdrop {
    backdrop-filter: blur(0.25rem);
    background-color: hsl(213deg 5% 46% / 25.1%);
  }
}

.m-dialog {

  &:focus-visible {
    outline: 3px solid var(--background);
    outline-offset: 3px;
    box-shadow: 0 0 0 3px var(--plain__enabled__front__default);
  }
  
  &__remark {
    grid-area: remark;
    height: 6px;

    &.--info {
      background-color: var(--major-signal-neutral__enabled__fill__default);
    }

    &.--success {
      background-color: var(--major-signal-success__enabled__fill__default);
    }

    &.--warning {
      background-color: var(--major-signal-warning__enabled__fill__default);
    }

    &.--error {
      background-color: var(--major-signal-error__enabled__fill__default);
    }
  }

  &__header {
    align-items: center;
    display: flex;
    grid-area: header;
    height: 3rem;
    overflow: hidden;
    padding: 0 2rem;

    > .a-icon {
      margin-right: 0.5rem;
    }

    .a-button--integrated {
      display: flex;
      margin-left: auto;
      margin-right: -2rem;
    }
  }

  &__title {

    @include text-highlight;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  // reset margins of divider to achieve design specification
  .a-divider {
    grid-area: divider;
    margin: 0;
  }

  &__content {
    grid-area: content;
    overflow-y: auto;
    padding: 1.5rem 2rem 0;

    &:first-child {
      padding-top: 2rem;
    }

    > *:last-child {
      margin-bottom: 2rem;
    }
  }

  &__headline {

    @include size-xl;
    @include text-highlight;

    margin-bottom: 1rem;
  }

  &__code {

    @include size-s;

    margin-top: 1rem;
  }

  &__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 1.5rem;

    .a-button:nth-last-child(2) {
      margin-left: auto;
    }
  }
}