A modal dialog component for displaying focused, blocking content. Modals present information or require user...

A modal dialog component for displaying focused, blocking content. Modals present information or require user interaction, overlaying the page with a semi-transparent backdrop. Supports header and footer sections, and optional full-width layout for larger content. Use modals to: - Collect user input (forms, confirmations, settings) - Display important information requiring acknowledgment - Present critical decisions or workflows - Show detailed content in a focused context Features: - Built-in close button (top-right) with close handler - Optional header and footer slots for flexible layouts - Full-width variant for maximized content space - Semantic role="dialog" for accessibility - Optional closeFunction callback for custom close handling The isActive property controls visibility (true = shown, false = hidden). Call closeModal() method to hide and trigger optional closeFunction callback.

<ed-modal></ed-modal>

Properties

Name Type Default Description
fullWidth Boolean boolean A modal dialog component for displaying focused, blocking content. Modals present information or require user interaction, overlaying the page with a semi-transparent backdrop. Supports header and footer sections, and optional full-width layout for larger content. Use modals to: - Collect user input (forms, confirmations, settings) - Display important information requiring acknowledgment - Present critical decisions or workflows - Show detailed content in a focused context Features: - Built-in close button (top-right) with close handler - Optional header and footer slots for flexible layouts - Full-width variant for maximized content space - Semantic role="dialog" for accessibility - Optional closeFunction callback for custom close handling The isActive property controls visibility (true = shown, false = hidden). Call closeModal() method to hide and trigger optional closeFunction callback. / export class EdModal extends EdElement { static get styles() { return unsafeCSS(styles); } /** Toggle modal window to full width of screen
isActive Boolean boolean Active property 1) If true, modal appears. If false, modal is hidden.
closeFunction String () => void Close function prop 1) Function that can be passed into the modal and run on close of the modal

Slots

Name Description
- Modal body content (main area)
header Modal header area (typically title/heading)
footer Modal footer area (typically actions/buttons)

Interactive Documentation

Full interactive examples, variant previews, accessibility audits, and the complete API reference are available in Storybook — generated directly from the component source code.

Source

packages/eddie-web-components/components/modal/modal.ts