Skip to contentPorsche Design System
You are currently viewing an earlier release of the Porsche Design System.Switch to the latest Porsche Design System documentation.
SearchGitHub repository of Porsche Design SystemOpen settings sidebar
Modal Table of ContentsPropertiestype BreakpointCustomizable<T> = { base: T; xs?: T; s?: T; m?: T; l?: T; xl?: T; xxl?: T; };PropertyAttributeDescriptionTypeDefaultaria ariaSets ARIA attributes on the dialog element for improved accessibility when no visible heading is present.type ModalAriaAttribute = {
  'aria-label'?: string;
  'role'?: string;
}
undefined
backdrop backdropSets the backdrop style. Use blur when the modal is opened by user interaction; use shading when opened automatically (e.g. Cookie Consent).type ModalBackdrop =
'blur'
'shading'
'blur'
background backgroundSets the background color of the modal panel (canvas or surface).type ModalBackground =
'canvas'
'surface'
'canvas'
disableBackdropClick disable-backdrop-clickWhen enabled, clicking the backdrop will not close the modal.booleanfalsedismissButton dismiss-buttonShows a dismiss button in the modal header so the user can manually close it.booleantruefullscreen 🛠fullscreenExpands the modal to the full viewport size, intended for mobile use cases. Supports responsive breakpoint values.boolean
BreakpointCustomizable<boolean>
false
open openControls whether the modal dialog is visible.booleanfalse
EventsEventDescriptionTypedismiss Emitted when the user closes the modal via the dismiss button, backdrop click, or Escape key.CustomEvent<void>motionHiddenEnd Emitted after the modal's close transition completes and the dialog is fully hidden.type ModalMotionHiddenEndEventDetail = TransitionEvent
CustomEvent<ModalMotionHiddenEndEventDetail>
motionVisibleEnd Emitted after the modal's open transition completes and the dialog is fully visible.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.
Global settingsColor SchemeAll color tokens use the light-dark() CSS function. Set the theme via the CSS color-scheme property: light for light mode, dark for dark mode, or light dark to follow the user's system preference.LightDarkLight DarkDirectionThe dir global attribute in HTML changes the direction of text and other content within an element. It's most often used on the <html> tag to set the entire page's direction, which is crucial for supporting languages that are written from right to left (RTL), such as Arabic and Hebrew. For example, using <html dir="rtl"> makes the entire page display from right to left, adjusting the layout and text flow accordingly.LTR (left-to-right)RTL (right-to-left)Text ZoomTo ensure accessibility and comply with WCAG 2.2 AA standards, it is mandatory for web content to support text resizing up to at least 200% without loss of content or functionality. Using relative units like rem is a best practice for achieving this, as they allow the text to scale uniformly based on the user's browser settings.100%130%150%200%