Component documentation

Components

Basics

Components

Objects

Utilities

Basics

Components

Objects

Utilities

Alert dialog

This page documents the AlertDialog component. This is a dialog where there are only two options, similar to a Javascript alert(). Also see: Dialog.

Delete

#

A warning when you are about to delete an item.

<div class="c-dialog-backdrop c-dialog-backdrop--visible" style="position:absolute;z-index:0;"></div>
<div class="c-dialog c-dialog--small" role="dialog">
    <div class="c-dialog__push"></div>
    <div class="c-dialog__body">
        <div class="c-dialog__content">
            <h3 class="c-h3">Are you sure?</h3>
            <p class="u-m-0">Are you sure want to delete this item?</p>
        </div>
    </div>
    <div class="c-dialog__footer">
        <div class="c-toolbar c-toolbar--spaced">
            <div class="c-toolbar__right">
                <div class="c-toolbar__item">
                    <div class="c-button-toolbar">
                        <button class="c-button c-button--secondary" data-dialog-close="data-dialog-close">
                            <div class="c-button__content">
                                <div class="c-button__label">Cancel</div>
                            </div>
                        </button>
                        <button class="c-button c-button--primary" data-dialog-close="data-dialog-close">
                            <div class="c-button__content">
                                <div class="o-svg-icon o-svg-icon-delete  ">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M7 4C7 2.89543 7.89543 2 9 2H15C16.1046 2 17 2.89543 17 4V6H18.9897C18.9959 5.99994 19.0021 5.99994 19.0083 6H21C21.5523 6 22 6.44772 22 7C22 7.55228 21.5523 8 21 8H19.9311L19.0638 20.1425C18.989 21.1891 18.1182 22 17.0689 22H6.93112C5.88184 22 5.01096 21.1891 4.9362 20.1425L4.06888 8H3C2.44772 8 2 7.55228 2 7C2 6.44772 2.44772 6 3 6H4.99174C4.99795 5.99994 5.00414 5.99994 5.01032 6H7V4ZM9 6H15V4H9V6ZM6.07398 8L6.93112 20H17.0689L17.926 8H6.07398ZM10 10C10.5523 10 11 10.4477 11 11V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V11C9 10.4477 9.44772 10 10 10ZM14 10C14.5523 10 15 10.4477 15 11V17C15 17.5523 14.5523 18 14 18C13.4477 18 13 17.5523 13 17V11C13 10.4477 13.4477 10 14 10Z" fill="#595959" />
                                    </svg>
                                </div>
                                <div class="c-button__label">Delete</div>
                            </div>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="c-dialog__push"></div>
</div>
.c-dialog-backdrop.c-dialog-backdrop--visible(style="position:absolute;z-index:0;")

.c-dialog.c-dialog--small(role="dialog")
    .c-dialog__push
    .c-dialog__body
        .c-dialog__content
            h3.c-h3 Are you sure?
            p.u-m-0 Are you sure want to delete this item?
    .c-dialog__footer
        .c-toolbar.c-toolbar--spaced
            .c-toolbar__right
                .c-toolbar__item
                    .c-button-toolbar
                        button.c-button.c-button--secondary(data-dialog-close)
                                .c-button__content
                                    .c-button__label Cancel
                        button.c-button.c-button--primary(data-dialog-close)
                                .c-button__content
                                    +icon('delete')
                                    .c-button__label Delete
    .c-dialog__push