Layr
⌘K
Ctrl K
Design Systems
AI Designer
Account
Roadmap
Sign in
Twilio Paste - alert-dialog
Getting started
Twilio Paste
Paste UI
Pro
Components
Account Switcher
Ai Chat Log
Alert
Alert Dialog
Anchor
Aspect Ratio
Avatar
Badge
Blockquote
Breadcrumb
Button
Button Group
Callout
Card
Chart Provider
Chat Composer
Chat Log
Checkbox
Code Block
Combobox
Corner Ornament
Data Grid
Date Picker
Description List
Detail Text
Disclosure
Display Heading
Display Pill Group
Editable Code Block
Example Text
File Picker
File Uploader
Flex
Form Layout
Form Pill Group
Grid
Heading
Help Text
Icon
In Page Navigation
Inline Code
Input
Keyboard Key
Label
List
Media Object
Menu
Meter
Minimizable Dialog
Modal
Multiselect Combobox
Page Header
Pagination
Paragraph
Popover
Product Switcher
Progress Bar
Progress Steps
Radio Button Group
Radio Group
Screen Reader Only
Select
Separator
Side Modal
Side Panel
Sidebar
Sidebar Navigation
Skeleton Loader
Slider
Spinner
Stack
Status Badge
Status Menu
Summary Detail
Switch
Table
Tabs
Textarea
Time Picker
Timeline
Toast
Tooltip
Topbar
Truncate
User Dialog
Visual Picker
<ul> <li>Confirming a permanent change, like deleting data</li> <li>Relaying an important system message like a maintenance downtime window</li> </ul> <p>Though visually similar to a Modal, an Alert Dialog requires the user to acknowledge the information in the dialog before they can interact with outside content.</p> <h3>Accessibility</h3> <ul> <li>All elements required to interact with the Alert Dialog, including closing or acknowledging it, are contained in the Alert Dialog since they trap focus, and users can't interact with the underlying page.</li> <li>Tabbing through an Alert Dialog will cycle through its content in the same way it does on a page.</li> <li>The element that serves as the Alert Dialog container has a role of alertdialog.</li> <li>The Alert Dialog is labelled by the heading prop.</li> </ul> <h2>Examples</h2> <h3>Default Alert Dialog</h3> <div class="example-section"> <div class="button-group"> <button class="paste-button" onclick="openDefaultDialog()">Open Alert Dialog</button> </div> </div> <h3>Destructive Alert Dialog</h3> <div class="example-section"> <div class="button-group"> <button class="paste-button paste-button-destructive" onclick="openDestructiveDialog()">Delete Item</button> </div> </div> <h3>Opening an Alert Dialog from a Modal</h3> <div class="example-section"> <div class="button-group"> <button class="paste-button" onclick="openModal()">Open Modal</button> </div> </div> <!-- Default Alert Dialog --> <div id="defaultDialog" class="alert-dialog-overlay hidden"> <div class="alert-dialog" role="alertdialog" aria-labelledby="default-title" aria-describedby="default-content"> <div class="alert-dialog-header"> <h3 id="default-title" class="alert-dialog-title">Confirm Action</h3> </div> <div id="default-content" class="alert-dialog-content"> <p>Are you sure you want to perform this action? This action cannot be undone.</p> </div> <div class="alert-dialog-footer"> <button class="paste-button paste-button-secondary" onclick="closeDefaultDialog()">Cancel</button> <button class="paste-button" onclick="confirmDefaultAction()">Confirm</button> </div> </div> </div> <!-- Destructive Alert Dialog --> <div id="destructiveDialog" class="alert-dialog-overlay hidden"> <div class="alert-dialog" role="alertdialog" aria-labelledby="destructive-title" aria-describedby="destructive-content"> <div class="alert-dialog-header"> <h3 id="destructive-title" class="alert-dialog-title">Delete Item</h3> </div> <div id="destructive-content" class="alert-dialog-content"> <p>Are you sure you want to delete this item? This action cannot be undone and will permanently remove the item from your account.</p> </div> <div class="alert-dialog-footer"> <button class="paste-button paste-button-secondary" onclick="closeDestructiveDialog()">Cancel</button> <button class="paste-button paste-button-destructive" onclick="confirmDeleteAction()">Delete</button> </div> </div> </div> <!-- Modal --> <div id="modal" class="modal-overlay hidden"> <div class="modal" role="dialog" aria-labelledby="modal-title"> <div class="modal-header"> <h3 id="modal-title">Settings</h3> </div> <div class="modal-body"> <p>This is a modal dialog. You can open an Alert Dialog from within this modal.</p> <p>Click the button below to see how an Alert Dialog can be triggered from within a modal context.</p> </div> <div class="modal-footer"> <button class="paste-button paste-button-secondary" onclick="closeModal()">Close</button> <button class="paste-button paste-button-destructive" onclick="openModalAlertDialog()">Delete Account</button> </div> </div> </div> <!-- Modal Alert Dialog --> <div id="modalAlertDialog" class="alert-dialog-overlay hidden"> <div class="alert-dialog" role="alertdialog" aria-labelledby="modal-alert-title" aria-describedby="modal-alert-content"> <div class="alert-dialog-header"> <h3 id="modal-alert-title" class="alert-dialog-title">Delete Account</h3> </div> <div id="modal-alert-content" class="alert-dialog-content"> <p>Are you sure you want to delete your account? This action cannot be undone and will permanently remove all your data.</p> </div> <div class="alert-dialog-footer"> <button class="paste-button paste-button-secondary" onclick="closeModalAlertDialog()">Cancel</button> <button class="paste-button paste-button-destructive" onclick="confirmAccountDeletion()">Delete Account</button> </div> </div> </div> <h2 id="feedback">Feedback</h2> <p>Help us improve this component by providing feedback, asking questions on Slack, or updating this file on GitHub.</p> </div> <script> // Default Alert Dialog functions function openDefaultDialog() { document.getElementById('defaultDialog').classList.remove('hidden'); document.getElementById('defaultDialog').querySelector('button').focus(); } function closeDefaultDialog() { document.getElementById('defaultDialog').classList.add('hidden'); } function confirmDefaultAction() { alert('Action confirmed!'); closeDefaultDialog(); } // Destructive Alert Dialog functions function openDestructiveDialog() { document.getElementById('destructiveDialog').classList.remove('hidden'); document.getElementById('destructiveDialog').querySelector('button').focus(); } function closeDestructiveDialog() { document.getElementById('destructiveDialog').classList.add('hidden'); } function confirmDeleteAction() { alert('Item deleted!'); closeDestructiveDialog(); } // Modal functions function openModal() { document.getElementById('modal').classList.remove('hidden'); document.getElementById('modal').querySelector('button').focus(); } function closeModal() { document.getElementById('modal').classList.add('hidden'); } // Modal Alert Dialog functions function openModalAlertDialog() { document.getElementById('modalAlertDialog').classList.remove('hidden'); document.getElementById('modalAlertDialog').querySelector('button').focus(); } function closeModalAlertDialog() { document.getElementById('modalAlertDialog').classList.add('hidden'); } function confirmAccountDeletion() { alert('Account deleted!'); closeModalAlertDialog(); closeModal(); } // Keyboard event handling for accessibility document.addEventListener('keydown', function(event) { if (event.key === 'Escape') { // Close any open dialogs if (!document.getElementById('defaultDialog').classList.contains('hidden')) { closeDefaultDialog(); } if (!document.getElementById('destructiveDialog').classList.contains('hidden')) { closeDestructiveDialog(); } if (!document.getElementById('modalAlertDialog').classList.contains('hidden')) { closeModalAlertDialog(); } if (!document.getElementById('modal').classList.contains('hidden')) { closeModal(); } } }); // Click outside to close (for better UX, though not typical for alert dialogs) document.addEventListener('click', function(event) { if (event.target.classList.contains('alert-dialog-overlay')) { if (event.target.id === 'defaultDialog') closeDefaultDialog(); if (event.target.id === 'destructiveDialog') closeDestructiveDialog(); if (event.target.id === 'modalAlertDialog') closeModalAlertDialog(); } if (event.target.classList.contains('modal-overlay')) { if (event.target.id === 'modal') closeModal(); } }); </script></body></html>' width="100%" height="1200" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">