sp-alert-dialog

NPM

0.44.0

Storybook

View Storybook
Examples API Changelog

Attributes and Properties #

Property Attribute Type Default Description variant variant AlertDialogVariants

0.44.0 (2024-07-15) #

Note: Version bump only for package @spectrum-web-components/alert-dialog

0.43.0 (2024-06-11) #

Note: Version bump only for package @spectrum-web-components/alert-dialog

0.42.5 (2024-05-24) #

Note: Version bump only for package @spectrum-web-components/alert-dialog

0.42.4 (2024-05-14) #

Note: Version bump only for package @spectrum-web-components/alert-dialog

0.42.3 (2024-05-01) #

Note: Version bump only for package @spectrum-web-components/alert-dialog

0.42.2 (2024-04-03) #

Note: Version bump only for package @spectrum-web-components/alert-dialog

0.42.1 (2024-04-02) #

Note: Version bump only for package @spectrum-web-components/alert-dialog

0.42.0 (2024-03-19) #

Features #

  • asset: use core tokens (99e76f4)

0.41.2 (2024-03-05) #

Note: Version bump only for package @spectrum-web-components/alert-dialog

0.41.1 (2024-02-22) #

Note: Version bump only for package @spectrum-web-components/alert-dialog

0.41.0 (2024-02-13) #

Note: Version bump only for package @spectrum-web-components/alert-dialog

0.40.5 (2024-02-05) #

Note: Version bump only for package @spectrum-web-components/alert-dialog

0.40.4 (2024-01-29) #

Note: Version bump only for package @spectrum-web-components/alert-dialog

0.40.3 (2024-01-11) #

Note: Version bump only for package @spectrum-web-components/alert-dialog

0.40.2 (2023-12-18) #

Note: Version bump only for package @spectrum-web-components/alert-dialog

0.40.1 (2023-12-05) #

Note: Version bump only for package @spectrum-web-components/alert-dialog

0.40.0 (2023-11-16) #

Note: Version bump only for package @spectrum-web-components/alert-dialog

0.39.4 (2023-11-02) #

Note: Version bump only for package @spectrum-web-components/alert-dialog

0.39.3 (2023-10-18) #

Note: Version bump only for package @spectrum-web-components/alert-dialog

0.39.2 (2023-10-13) #

Note: Version bump only for package @spectrum-web-components/alert-dialog

0.39.1 (2023-10-06) #

Bug Fixes #

  • alert-dialog: use resize observer in place of page resize event for content measurement work (b963813)

0.39.0 (2023-09-25) #

Bug Fixes #

  • alert-dialog: add Alert Dialog package (#3501) (1062847)

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 #

See it on NPM! How big is this package in your project?

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>