LWC: Reusable Modal

🪟 Reusable Modal / Dialog for Salesforce LWC

Fully configurable, accessible, and reusable Lightning Web Component modal with named slots, multiple size variants, keyboard support, and customizable actions.

📖 Project Overview

Reusable Modal is a Lightning Web Component designed to provide a consistent modal dialog experience across Salesforce applications.

The component supports customizable headers, bodies, and footers through named slots while maintaining accessibility and Salesforce Lightning Design System (SLDS) compliance.

Developers can easily integrate the component into any Lightning Web Component and configure modal behavior using simple public properties.

🔗 View Source Code ⬇ Download ZIP

✨ Key Features

Feature	Description
Named Slots	Custom header, body, and footer content.
Multiple Sizes	Small, Medium, Large, and Full Screen variants.
Keyboard Accessibility	Supports ESC key dismissal.
Overlay Click Close	Optional backdrop click dismissal.
Default Footer Actions	Built-in Cancel and Confirm buttons.
Fully Accessible	ARIA support and SLDS compliant design.

🏗 Component Architecture

Parent Component
        │
        ▼
c-reusable-modal
        │
        ├── Header Slot
        ├── Body Slot
        ├── Footer Slot
        │
        ▼
Modal Controller
        │
        ├── Open / Close
        ├── ESC Handling
        ├── Confirm Event
        └── Overlay Click Logic

📁 Project Structure

force-app/main/default/lwc/

├── reusableModal/
│   ├── reusableModal.html
│   ├── reusableModal.js
│   ├── reusableModal.css
│   └── reusableModal.js-meta.xml
│
└── reusableModalDemo/
    ├── reusableModalDemo.html
    ├── reusableModalDemo.js
    └── reusableModalDemo.js-meta.xml

⚙️ Public API Properties

Property	Default	Description
isOpen	false	Controls modal visibility.
title	''	Default modal title.
size	medium	small | medium | large | full
cancelLabel	Cancel	Cancel button text.
confirmLabel	OK	Confirm button text.
closeOnOverlayClick	false	Enable backdrop dismissal.

📏 Supported Modal Sizes

Size	Description
Small	~400px width
Medium	SLDS default modal width
Large	~90vw width
Full	100vw × 100vh

💻 Basic Usage Example

<c-reusable-modal cancel-label="Cancel" confirm-label="Delete" is-open="{isModalOpen}" onclose="{closeModal}" onconfirm="{handleDelete}" title="Confirm Delete">
    <span slot="body">
        Are you sure you want to delete this record?
    </span>
</c-reusable-modal>

🎨 Custom Header, Body & Footer Example

<c-reusable-modal is-open="{isOpen}" onclose="{handleClose}" size="medium">
    <span slot="header">
        Warning
    </span>
    <span slot="body">
        Unsaved changes detected.
    </span>
    <span slot="footer">
        Custom Action Buttons
    </span>
</c-reusable-modal>

♿ Accessibility Features

• role="dialog"
• aria-modal="true"
• aria-labelledby support
• aria-describedby support
• ESC key dismissal
• Keyboard-friendly navigation
• Accessible close button labels
• SLDS-compliant focus management

🚀 Benefits

• Reusable across Salesforce projects.
• Consistent user experience.
• Improved accessibility.
• Reduces duplicate modal code.
• Easy integration into existing LWCs.
• Supports enterprise-grade applications.

🔗 View Source Code ⬇ Download ZIP

📌 Conclusion

Reusable Modal provides a clean, flexible, and accessible way to implement modal dialogs in Salesforce Lightning Web Components. With support for named slots, multiple size variants, keyboard interactions, and customizable behaviors, it serves as a foundational UI component for enterprise Salesforce applications.