UI Library

Dialog

Alert Dialog

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Alert Dialog.

<insert-markup>dialog.alert-</insert-markup>

Alert

I am about to perform this action. Thought of letting you know.

Markup 
<div class="m-alert">
    <div class="m-alert__overlay"></div>
    <div class="m-alert__window">
        <h3 class="m-alert__title">Alert</h3>
        <div class="m-alert__content-wrapper">
            <p class="m-alert__content">I am about to perform this action. Thought of letting you know.</p>
            <button class="m-btn m-btn--primary m-alert__btn">Okay</button>
        </div>
    </div>
</div>
Source: static/css/src/_m-alert.scss, line 1

Confirm Dialog

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

confirm Dialog.

<insert-markup>dialog.confirm-</insert-markup>

Confirm

I am about to perform this action. Should I proceed?

Markup 
<div class="m-confirm">
    <div class="m-confirm__overlay"></div>
    <div class="m-confirm__window">
        <h3 class="m-confirm__title">Confirm</h3>
        <div class="m-confirm__content-wrapper">
            <p class="m-confirm__content">I am about to perform this action. Should I proceed?</p>
            <div class="m-confirm__btn-wrapper">
                <button class="m-btn m-btn--primary">Yes</button>
                <button class="m-btn">No</button>
            </div>
        </div>
    <div>
</div>
Source: static/css/src/_m-confirm.scss, line 1