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 ariaSets 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'background backgroundDefines the background colortype ModalBackground =
'canvas'
'surface''canvas'disableBackdropClick disable-backdrop-clickIf true, the modal will not be closable via backdrop click.booleanfalsedismissButton 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>falseopen openIf true, the modal is open.booleanfalseEventsEventDescriptionTypedismiss 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="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)--ref-p-modal-pt Exposes the internally used padding-top of the Modal as read only CSS variable. When slotting e.g. a media container, this variable can be used to stretch the element to the top of the Modal.--ref-p-modal-pb Exposes the internally used padding-bottom of the Modal as read only CSS variable. When slotting e.g. a media container, this variable can be used to stretch the element to the bottom of the Modal.--ref-p-modal-px Exposes the internally used padding-inline of the Modal as read only CSS variable. When slotting e.g. a media container, this variable can be used to stretch the element to the full horizontal size of the Modal.