Modals can have optional header buttons for help and closing.
This is the help content for the modal.
You can provide context-specific help here.
`, menuOptions: [{ name: 'Got it', action: async (modal) => modal!.destroy() }], }); }, content: html`This modal has a help button in the header. Click it to see help content.
The close button is also visible by default.
`, menuOptions: [{ name: 'OK', action: async (modal) => modal!.destroy() }], }); }}>With Help ButtonThis modal has no close button in the header.
You must use the action buttons or click outside to close it.
`, menuOptions: [{ name: 'Close', action: async (modal) => modal!.destroy() }], }); }}>No Close ButtonThis modal has both help and close buttons.
`, menuOptions: [{ name: 'Done', action: async (modal) => modal!.destroy() }], }); }}>Both ButtonsThis modal has a clean header with no buttons.
`, menuOptions: [{ name: 'Close', action: async (modal) => modal!.destroy() }], }); }}>Clean HeaderModals can have different widths: small, medium, large, fullscreen, or custom pixel values.
This is a small modal with a width of 380px. Perfect for simple confirmations or brief messages.
`, menuOptions: [{ name: 'Cancel', action: async (modal) => modal!.destroy() }, { name: 'OK', action: async (modal) => modal!.destroy() }], }); }}>Small ModalThis large modal is 800px wide and perfect for displaying more complex content like forms with multiple columns, tables, or detailed information.
This modal takes up almost the entire viewport with a 20px margin on all sides. The header buttons are particularly useful in fullscreen mode.
The content area can be as tall as needed and will scroll if necessary.
You can also set custom pixel widths and min/max constraints.
This modal has a custom width of exactly 700 pixels.
`, menuOptions: [{ name: 'Close', action: async (modal) => modal!.destroy() }], }); }}>Custom 700pxThis modal is set to 'large' but constrained by a maxWidth of 600px.
`, menuOptions: [{ name: 'Got it', action: async (modal) => modal!.destroy() }], }); }}>Max Width 600pxThis modal width is set to 300px but has a minWidth of 400px, so it will be 400px wide.
`, menuOptions: [{ name: 'OK', action: async (modal) => modal!.destroy() }], }); }}>Min Width 400pxModals can have different button configurations with proper spacing.
This modal demonstrates multiple buttons with proper spacing between them.
`, menuOptions: [{ name: 'Delete', action: async (modal) => modal!.destroy() }, { name: 'Cancel', action: async (modal) => modal!.destroy() }, { name: 'Save Changes', action: async (modal) => modal!.destroy() }], }); }}>Three ButtonsSometimes you just need one button.
`, menuOptions: [{ name: 'Acknowledge', action: async (modal) => modal!.destroy() }], }); }}>Single ButtonThis modal has no bottom buttons. Use the X button or click outside to close.
This is useful for informational modals that don't require user action.
`, menuOptions: [], }); }}>No ButtonsTesting button layout with longer labels.
`, menuOptions: [{ name: 'Discard All Changes', action: async (modal) => modal!.destroy() }, { name: 'Save and Continue Editing', action: async (modal) => modal!.destroy() }], }); }}>Long LabelsAll modals automatically become full-width on mobile devices (< 768px viewport width) for better usability.
Resize your browser window to see how this modal adapts. On mobile viewports, it will automatically take the full width minus margins.
The header buttons remain accessible at all viewport sizes.
`, menuOptions: [{ name: 'Close', action: async (modal) => modal!.destroy() }], }); }}>Test ResponsiveWhen content exceeds the modal's max-height (calc(100vh - 80px)), the tile caps at that height and the content area scrolls inside. The heading and bottom buttons stay pinned.
§ ${i + 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, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
`)} `, menuOptions: [{ name: 'Cancel', action: async (modal) => modal!.destroy() }, { name: 'Accept', action: async (modal) => modal!.destroy() }], }); }}>Long ArticleSelected items: