Alert

Open in Figma View all renders

In Page Alert

This is a standard in page alert. It is expected that the dismiss button when interacted with will hide the alert. 

<div class="alert alert--in-page">
    <div class="alert__header">
        <div class="alert__heading">
            <span>
                <span class="material-symbols-rounded" aria-hidden="true">
                    border_color
                </span>
            </span>
            <p class="copy copy--bold">
                Header
            </p>
        </div>
        <button class="alert__dismiss" aria-label="alert dismiss">
            <span>
                <span class="material-symbols-rounded" aria-hidden="true">
                    close
                </span>
            </span>
        </button>
    </div>
    <div class="alert__body">
        <p class="copy">
            Some additional feedback describing the alert or notification
        </p>
        <a href="#">Action</a>
    </div>
</div>

Overlay Alert

This is the alert class applied to a dialog element. Note that the open attribute is NOT required but is used here to force the dialog to open in a non modal way For display purposes. It is recommended to use the showModal and Close API as appropriate (see here) . The dialog when opened as a modal using the mentioned methods will render a backdrop and make other elements in the page inert. The dialog is not positioned save to center itself. It is expected that whatever component or page has rendered the alert will position it appropriately.

This example also contains an autofocus attribute on the action link. Consider if this appropriate for all your use case, also consider adding an aria-label or description where the link text relies on the alert body. 

<dialog open>
    <div class="alert">
        <div class="alert__header">
            <div class="alert__heading">
                <span>
                    <span class="material-symbols-rounded" aria-hidden="true">
                        border_color
                    </span>
                </span>
                <p class="copy copy--bold">
                    Header
                </p>
            </div>
            <button class="alert__dismiss" aria-label="alert dismiss">
                <span>
                    <span class="material-symbols-rounded" aria-hidden="true">
                        close
                    </span>
                </span>
            </button>
        </div>
        <div class="alert__body">
            <p class="copy">
                Some additional feedback describing the alert or notification
            </p>
            <a href="#" autofocus>Action</a>
        </div>
    </div>
</dialog>

Variations and modifiers

Neutral Black Alert

<div class="alert alert--neutral-black">
    <div class="alert__header">
        <div class="alert__heading">
            <span>
                <span class="material-symbols-rounded" aria-hidden="true">
                    cloud_done
                </span>
            </span>
            <p class="copy copy--bold">
                Header
            </p>
        </div>
        <button class="alert__dismiss" aria-label="alert dismiss">
            <span>
                <span class="material-symbols-rounded" aria-hidden="true">
                    close
                </span>
            </span>
        </button>
    </div>
    <div class="alert__body">
        <p class="copy">
            Some additional feedback describing the alert or notification
        </p>
        <a href="#">Action</a>
    </div>
</div>

Success Alert

<div class="alert alert--success">
    <div class="alert__header">
        <div class="alert__heading">
            <span>
                <span class="material-symbols-rounded" aria-hidden="true">
                    check_circle
                </span>
            </span>
            <p class="copy copy--bold">
                Header
            </p>
        </div>
        <button class="alert__dismiss" aria-label="alert dismiss">
            <span>
                <span class="material-symbols-rounded" aria-hidden="true">
                    close
                </span>
            </span>
        </button>
    </div>
    <div class="alert__body">
        <p class="copy">
            Some additional feedback describing the alert or notification
        </p>
        <a href="#">Action</a>
    </div>
</div>

Warning Alert

<div class="alert  alert--warning">
    <div class="alert__header">
        <div class="alert__heading">
            <span>
                <span class="material-symbols-rounded" aria-hidden="true">
                    error
                </span>
            </span>
            <p class="copy copy--bold">
                Header
            </p>
        </div>
        <button class="alert__dismiss" aria-label="alert dismiss">
            <span>
                <span class="material-symbols-rounded" aria-hidden="true">
                    close
                </span>
            </span>
        </button>
    </div>
    <div class="alert__body">
        <p class="copy">
            Some additional feedback describing the alert or notification
        </p>
        <a href="#">Action</a>
    </div>
</div>

Error Alert

<div class="alert alert--error">
    <div class="alert__header">
        <div class="alert__heading">
            <span>
                <span class="material-symbols-rounded" aria-hidden="true">
                    error
                </span>
            </span>
            <p class="copy copy--bold">
                Header
            </p>
        </div>
        <button class="alert__dismiss" aria-label="alert dismiss">
            <span>
                <span class="material-symbols-rounded" aria-hidden="true">
                    close
                </span>
            </span>
        </button>
    </div>
    <div class="alert__body">
        <p class="copy">
            Some additional feedback describing the alert or notification
        </p>
        <a href="#">Action</a>
    </div>
</div>

Alert without Action

<div class="alert">
    <div class="alert__header">
        <div class="alert__heading">
            <span>
                <span class="material-symbols-rounded" aria-hidden="true">
                    info
                </span>
            </span>
            <p class="copy copy--bold">
                Header
            </p>
        </div>
        <button class="alert__dismiss" aria-label="alert dismiss">
            <span>
                <span class="material-symbols-rounded" aria-hidden="true">
                    close
                </span>
            </span>
        </button>
    </div>
    <div class="alert__body">
        <p class="copy">
            Some additional feedback describing the alert or notification
        </p>
    </div>
</div>

Alert without Body

<div class="alert">
    <div class="alert__header">
        <div class="alert__heading">
            <span>
                <span class="material-symbols-rounded" aria-hidden="true">
                    info
                </span>
            </span>
            <p class="copy copy--bold">
                Header
            </p>
        </div>
        <button class="alert__dismiss" aria-label="alert dismiss">
            <span>
                <span class="material-symbols-rounded" aria-hidden="true">
                    close
                </span>
            </span>
        </button>
    </div>
</div>

Alert without Dismiss

Only in page alerts should be rendered without a dismiss - a modal dialog dismiss must always be rendered with a dismiss button. 

<div class="alert">
    <div class="alert__header">
        <div class="alert__heading">
            <span>
                <span class="material-symbols-rounded" aria-hidden="true">
                    info
                </span>
            </span>
            <p class="copy copy--bold">
                Header
            </p>
        </div>
    </div>
    <div class="alert__body">
        <p class="copy">
            Some additional feedback describing the alert or notification
        </p>
        <a href="#">Action</a>
    </div>
</div>