Modal / Dialog generator
Confirmation dialogs, delete warnings and multi-step wizards all share the same SLDS modal skeleton. Set the header color to match intent (destructive, brand, success, warning) and export ready-to-wire markup.
Your changes autosave in this browser, and the link above reproduces this exact configuration for anyone you send it to.
Live preview
Generated code
<template>
<section
class="slds-modal slds-fade-in-open studio-modal"
role="dialog"
tabindex="-1"
aria-labelledby="modal-heading"
aria-modal="true"
>
<div class="slds-modal__container">
<header class="slds-modal__header studio-modal__header">
<h1 id="modal-heading" class="slds-modal__title slds-hyphenate">Delete Record?</h1>
</header>
<div class="slds-modal__content slds-p-around_medium studio-modal__body">
This action cannot be undone. The record and its related data will be permanently removed.
</div>
<footer class="slds-modal__footer">
<lightning-button variant="neutral" label="Cancel" onclick={handleCancel}></lightning-button>
<lightning-button variant="destructive" label="Confirm" class="slds-m-left_x-small" onclick={handleConfirm}></lightning-button>
</footer>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open studio-modal__backdrop"></div>
</template>Design tips for modal / dialogs
- Reserve destructive-red headers for irreversible actions only — overusing red trains users to ignore it.
- Keep modal body copy under three sentences; anything longer belongs on a full record page.
- A short fade-in animation on open helps users notice the modal without feeling jarring.