Modal component | nilshendriks.com

nils hendriks

Design System

Modal component

Published on:

I’ve developed a Modal component and wrote it as a Custom Element or Web Component. This Modal primarily handles the opening and closing of modals, no matter what’s inside it.

It offers slots for placing content and includes these options/props/features:

  1. You can set the text for the button that opens the modal.
  2. Customize the open button with your preferred button styles.
  3. Add an icon to the button.
  4. Adjust the blur level for the overlay.
  5. Tailor the dialog’s style using CSS custom properties for theme customization.
  6. Enjoy a smooth fading effect when the modal appears and disappears.
  7. NEW! optionally set max-width for the modal. Defaults to ‘min-content’ (maxWidth prop).

Example

Code

HTML

See the HTML in a modal. Inception!

JS - Custom Element