Toasts, Spinners, and Modals

Module 8 covered ShowToastEvent for brief notifications and lightning-spinner for in-progress loading feedback. Both remain exactly as useful here — this lesson adds the third major UX surface: modals.

// confirmDialog.js
import LightningModal from 'lightning/modal';
import { api } from 'lwc';

export default class ConfirmDialog extends LightningModal {
    @api message;

    handleCancel() {
        this.close('cancel');
    }

    handleConfirm() {
        this.close('confirm');
    }
}

<!-- confirmDialog.html -->
<template>
    <lightning-modal-header label="Please Confirm"></lightning-modal-header>
    <lightning-modal-body>
        <p>{message}</p>
    </lightning-modal-body>
    <lightning-modal-footer>
        <lightning-button label="Cancel" onclick={handleCancel}></lightning-button>
        <lightning-button variant="brand" label="Confirm" onclick={handleConfirm}></lightning-button>
    </lightning-modal-footer>
</template>

A modal is its own component, extending LightningModal instead of LightningElement — it comes with lightning-modal-header/-body/-footer structural components, and this.close(result) is how it closes itself and passes a result back.

import ConfirmDialog from 'c/confirmDialog';

async handleDelete() {
    const result = await ConfirmDialog.open({
        size: 'small',
        message: 'Are you sure you want to delete this record?',
    });

    if (result === 'confirm') {
        // proceed with the delete
    }
}

.open() is Promise-based (Module 4's async/await applies directly) — it resolves with whatever value was passed to this.close(...) inside the modal. Any property passed into .open() besides size becomes an @api property on the modal component, exactly like a parent passing a property to a child (Module 5).