@spectrum-web-components/alert-dialog

Description

sp-alert-dialog displays important information that users need to acknowledge. When used directly the sp-alert-dialog element surfaces a slot based API for deep customization of the content to be included in the overlay.

Usage

yarn add @spectrum-web-components/alert-dialog

Import the side effectful registration of <sp-alert-dialog> via:

import '@spectrum-web-components/alert-dialog/sp-alert-dialog.js';

When looking to leverage the AlertDialog base class as a type and/or for extension purposes, do so via:

import { AlertDialog } from '@spectrum-web-components/alert-dialog';

Variants

Confirmation

This is the default variant for alert dialogs. Use a confirmation variant for asking a user to confirm a choice.

<sp-alert-dialog variant="confirmation">
    <h2 slot="heading">Disclaimer</h2>
    Smart filters are nondestructive and will preserve your original images.
    <sp-button
        slot="button"
        id="cancelButton"
        variant="secondary"
        treatment="outline"
        onclick="this.dispatchEvent(new Event('close', { bubbles: true, composed: true }));"
    >
        Cancel
    </sp-button>
    <sp-button
        slot="button"
        id="confirmButton"
        variant="accent"
        treatment="fill"
        onclick="this.dispatchEvent(new Event('close', { bubbles: true, composed: true }));"
    >
        Enable
    </sp-button>
</sp-alert-dialog>

Information

Information alert dialogs communicate important information that a user needs to acknowledge. Before using this kind of alert dialog, make sure it’s the appropriate communication channel for the message instead of a toast or a more lightweight messaging option.

<sp-alert-dialog variant="information">
    <h2 slot="heading">Connect to wifi</h2>
    Please connect to wifi to sync your projects or go to Settings to change
    your preferences.
    <sp-button
        slot="button"
        id="cancelButton"
        variant="secondary"
        treatment="outline"
        onclick="this.dispatchEvent(new Event('close', { bubbles: true, composed: true }));"
    >
        Cancel
    </sp-button>
    <sp-button
        slot="button"
        id="confirmButton"
        variant="primary"
        treatment="outline"
        onclick="this.dispatchEvent(new Event('close', { bubbles: true, composed: true }));"
    >
        Continue
    </sp-button>
</sp-alert-dialog>

Warning

Warning alert dialogs communicate important information to users in relation to an issue that needs to be acknowledged, but does not block the user from moving forward.

<sp-alert-dialog variant="warning">
    <h2 slot="heading">Unverified format</h2>
    This format has not been verified and may not be viewable for some users. Do
    you want to continue publishing?
    <sp-button
        slot="button"
        id="cancelButton"
        variant="secondary"
        treatment="outline"
        onclick="this.dispatchEvent(new Event('close', { bubbles: true, composed: true }));"
    >
        Cancel
    </sp-button>
    <sp-button
        slot="button"
        id="confirmButton"
        variant="primary"
        treatment="outline"
        onclick="this.dispatchEvent(new Event('close', { bubbles: true, composed: true }));"
    >
        Continue
    </sp-button>
</sp-alert-dialog>

Error

Error alert dialogs communicate critical information about an issue that a user needs to acknowledge.

<sp-alert-dialog variant="error">
    <h2 slot="heading">Unable to share</h2>
    An error occured while sharing your project. Please verify the email address
    and try again.
    <sp-button
        slot="button"
        id="confirmButton"
        variant="primary"
        treatment="outline"
        onclick="this.dispatchEvent(new Event('close', { bubbles: true, composed: true }));"
    >
        Continue
    </sp-button>
</sp-alert-dialog>

Destructive

Destructive alert dialogs are for when a user needs to confirm an action that will impact their data or experience in a potentially negative way, such as deleting files or contacts.

<sp-alert-dialog variant="destructive">
    <h2 slot="heading">Delete 3 documents?</h2>
    Are you sure you want to delete the 3 selected documents?
    <sp-button
        slot="button"
        id="cancelButton"
        variant="secondary"
        treatment="outline"
        onclick="this.dispatchEvent(new Event('close', { bubbles: true, composed: true }));"
    >
        Cancel
    </sp-button>
    <sp-button
        slot="button"
        id="confirmButton"
        variant="negative"
        treatment="fill"
        onclick="this.dispatchEvent(new Event('close', { bubbles: true, composed: true }));"
    >
        Delete
    </sp-button>
</sp-alert-dialog>

Secondary Button

An alert dialog can have a total of 3 buttons if the secondary outline button label is defined.

<sp-alert-dialog variant="secondary">
    <h2 slot="heading">Rate this app</h2>
    If you enjoy our app, would you mind taking a moment to rate it?
    <sp-button
        slot="button"
        id="secondaryButton"
        variant="secondary"
        treatment="outline"
        onclick="this.dispatchEvent(new Event('close', { bubbles: true, composed: true }));"
    >
        No, thanks
    </sp-button>
    <sp-button
        slot="button"
        id="cancelButton"
        variant="secondary"
        treatment="outline"
        onclick="this.dispatchEvent(new Event('close', { bubbles: true, composed: true }));"
    >
        Remind me later
    </sp-button>
    <sp-button
        slot="button"
        id="confirmButton"
        variant="primary"
        treatment="outline"
        onclick="this.dispatchEvent(new Event('close', { bubbles: true, composed: true }));"
    >
        Rate now
    </sp-button>
</sp-alert-dialog>