Confirm dialog

A confirm dialog can be used to verify whether a user want to proceed or cancel a requested action.

To see a detailed explanation of all existing classes, please refer to the usage table below.

Warning confirm dialog

<div class="dialog is-shown dialog--confirm">
    <div class="dialog__overlay"></div>
    <div class="dialog__container">
        <div class="dialog__background">
            <section class="dialog__content">
                <h1 class="confirm__headline">Lorem ipsum</h1>
                <p>
                    Quisque tincidunt sodales pretium. Nulla consectetur purus mi, id ultrices nibh mollis sed. Nunc hendrerit massa cursus, vulputate ligula nec, mollis ante. Sed diam purus, auctor nec nulla at, luctus vulputate dui.
                </p>
            </section>
            <footer class="dialog__footer">
                <a class="button button--secondary" href="#">Secondary action</a>
                <a class="button button--primary" href="#">Primary action</a>
            </footer>
        </div>
    </div>
</div>

Alert confirm dialog

<div class="dialog is-shown dialog--confirm confirm--alert">
    <div class="dialog__overlay"></div>
    <div class="dialog__container">
        <div class="dialog__background">
            <section class="dialog__content">
                <h1 class="confirm__headline">Lorem ipsum</h1>
                <p>
                    Quisque tincidunt sodales pretium. Nulla consectetur purus mi, id ultrices nibh mollis sed. Nunc hendrerit massa cursus, vulputate ligula nec, mollis ante. Sed diam purus, auctor nec nulla at, luctus vulputate dui.
                </p>
            </section>
            <footer class="dialog__footer">
                <a class="button button--secondary" href="#">Secondary action</a>
                <a class="button button--primary" href="#">Primary action</a>
            </footer>
        </div>
    </div>
</div>

Information confirm dialog

<div class="dialog is-shown dialog--confirm confirm--info">
    <div class="dialog__overlay"></div>
    <div class="dialog__container">
        <div class="dialog__background">
            <section class="dialog__content">
                <h1 class="confirm__headline">Lorem ipsum</h1>
                <p>
                    Quisque tincidunt sodales pretium. Nulla consectetur purus mi, id ultrices nibh mollis sed. Nunc hendrerit massa cursus, vulputate ligula nec, mollis ante. Sed diam purus, auctor nec nulla at, luctus vulputate dui.
                </p>
            </section>
            <footer class="dialog__footer">
                <a class="button button--secondary" href="#">Secondary action</a>
                <a class="button button--primary" href="#">Primary action</a>
            </footer>
        </div>
    </div>
</div>

Custom confirm dialog

<div class="dialog is-shown dialog--confirm confirm--custom">
    <div class="dialog__overlay"></div>
    <div class="dialog__container">
        <div class="dialog__background has-borderColor-forced-accentTealDark">
            <section class="confirm__icon">
                <i aria-hidden="true" class="iconMdsp assetNetwork black has-color-forced-accentTealDark"></i>
            </section>
            <section class="dialog__content">
                <h1 class="confirm__headline">Lorem ipsum</h1>
                <p>
                    Quisque tincidunt sodales pretium. Nulla consectetur purus mi, id ultrices nibh mollis sed. Nunc hendrerit massa cursus, vulputate ligula nec, mollis ante. Sed diam purus, auctor nec nulla at, luctus vulputate dui.
                </p>
            </section>
            <footer class="dialog__footer">
                <a class="button button--secondary" href="#">Secondary action</a>
                <a class="button button--primary" href="#">Primary action</a>
            </footer>
        </div>
    </div>
</div>

Usage

ElementClassDescription
.dialog.dialog--confirm .is-shown Displays the standard warning confirm dialog.
.dialog.dialog--confirm .confirm--alert Applies the styling for an alert confirm dialog.
.dialog.dialog--confirm .confirm--info Applies the styling for a info confirm dialog.
.dialog.dialog--confirm .confirm--custom Enables a developer to use a customizeable dialog style with any available top border color and any available system icon in any available color:
  • Add an available .has-borderColor-forced-<color name> class to the html element with class .dialog__background to apply the required top border color.
  • Add following additional code snippet as first child to the html element .dialog__background:
    <section class="confirm__icon"><i class="iconMdsp assetNetwork has-color-forced-accentTealDark"></i></section>
  • Add an available .has-color-forced-<color name> class to the html element .iconMdsp to apply the required color to the desired icon.
Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top