@spectrum-web-components/alert-dialog
Advanced tools
Web component implementation of a Spectrum design AlertDialog
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.
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';
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 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 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 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 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>
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>
1.0.3 (2024-12-09)
FAQs
Web component implementation of a Spectrum design AlertDialog
We found that @spectrum-web-components/alert-dialog demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.