Modal Table of Contents

• Props
• Events
• Slots
• CSS Variables

Propertiestype BreakpointCustomizable<T> = { base: T; xs?: T; s?: T; m?: T; l?: T; xl?: T; xxl?: T; };PropertyAttributeDescriptionTypeDefaultaria ariaAdd ARIA attributes.type ModalAriaAttribute = {
  'aria-label'?: string;
  'role'?: string;
}undefinedbackdrop backdropDefines the backdrop, 'blur' (should be used when Modal is opened by user interaction, e.g. after a click on a button) and 'shading' (should be used when Modal gets opened automatically, e.g. Cookie Consent).type ModalBackdrop =
'blur'
'shading''blur'disableBackdropClick disable-backdrop-clickIf true, the modal will not be closable via backdrop click.booleanfalsedisableCloseButton 🚫disable-close-buttonIf true, the modal will not have a dismiss button. deprecated since v3.0.0, will be removed with next major release, use dismissButton instead.booleanundefineddismissButton dismiss-buttonIf false, the modal will not have a dismiss button.booleantruefullscreen 🛠fullscreenIf true the modal uses max viewport height and width. Should only be used for mobile.boolean
BreakpointCustomizable<boolean>falseheading 🚫headingdeprecated since v3.0.0, will be removed with next major release, use header slot instead The title of the modalstringundefinedopen openIf true, the modal is open.booleanfalsetheme themeAdapts the modal color depending on the theme.type Theme =
'light'
'dark'
'auto''light'EventsEventDescriptionTypeclose 🚫deprecated since v3.0.0, will be removed with next major release, use dismiss event instead. Emitted when the component requests to be dismissed.CustomEvent<void>dismiss Emitted when the component requests to be dismissed.CustomEvent<void>motionHiddenEnd Emitted when the modal is closed and the transition is finished.type ModalMotionHiddenEndEventDetail = TransitionEvent
CustomEvent<ModalMotionHiddenEndEventDetail>motionVisibleEnd Emitted when the modal is opened and the transition is finished.type ModalMotionVisibleEndEventDetail = TransitionEvent
CustomEvent<ModalMotionVisibleEndEventDetail>SlotsSlotDescriptionisRequiredaltPropallowedTagNames<slot name="heading"> 🚫Renders a heading section above the content area.<slot name="header"> Renders a header section above the content area.<slot> Default slot for the main content.<slot name="footer"> Shows a sticky footer section, flowing under the content area when scrollable.CSS VariablesCSS VariableDescriptiondefaultValue--p-modal-width Width of the modal.auto--p-modal-spacing-top Spacing of the modal to the top.clamp(16px, 10vh, 192px)--p-modal-spacing-bottom Spacing of the modal to the bottom.clamp(16px, 10vh, 192px)