Modal
An overlay dialog that focuses the user's attention on a single task or piece of information. The page behind is blocked from interaction until the modal is dismissed.
Basic
A simple modal with heading and body text. No footer — dismiss via the × button or Escape key.
<diwa-button variant="primary">Open Modal</diwa-button>
<diwa-modal heading="About Diwa">Diwa Design System provides a set of accessible, framework-agnostic Web Components built with Stencil.js.</diwa-modal>With footer
The sticky footer slot holds primary and secondary action buttons. Use clear, action-oriented labels.
<diwa-button variant="primary">Open Modal</diwa-button>
<diwa-modal heading="Confirm deletion">
Are you sure you want to delete this item? This action cannot be undone.
<div slot="footer" style='{"display":"flex","gap":"8px"}'>
<diwa-button variant="danger">Delete</diwa-button>
<diwa-button variant="secondary">Cancel</diwa-button>
</div>
</diwa-modal>With header slot
The header slot adds a description or metadata line below the title bar, before the body.
Changes take effect immediately and apply across all sessions.
Adjust your preferences below. All settings are saved automatically.<diwa-button variant="primary">Open Modal</diwa-button>
<diwa-modal heading="Update settings">
<p slot="header" style='{"margin":"0","fontSize":"13px","color":"var(--diwa-text-secondary)"}'>Changes take effect immediately and apply across all sessions.</p>
Adjust your preferences below. All settings are saved automatically.
<div slot="footer" style='{"display":"flex","gap":"8px"}'>
<diwa-button variant="primary">Save changes</diwa-button>
<diwa-button variant="ghost">Discard</diwa-button>
</div>
</diwa-modal>Scrollable content
The body scrolls independently when content exceeds the modal's max-height. The footer stays pinned.
<diwa-button variant="primary">Open Modal</diwa-button>
<diwa-modal heading="Terms of Service">
Section 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Section 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Section 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Section 4: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Section 5: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Section 6: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Section 7: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Section 8: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
<div slot="footer" style='{"display":"flex","gap":"8px"}'>
<diwa-button variant="primary">Accept</diwa-button>
<diwa-button variant="secondary">Decline</diwa-button>
</div>
</diwa-modal>Shading backdrop
Use the shading backdrop for system-triggered modals (session expiry, cookie consent). Backdrop click is disabled.
<diwa-button variant="primary">Open Modal</diwa-button>
<diwa-modal heading="Session expired" backdrop="shading" disable-backdrop-click>
Your session has expired due to inactivity. Please sign in again to continue.
<div slot="footer">
<diwa-button variant="primary">Sign in</diwa-button>
</div>
</diwa-modal>