{ "_copyright": "Copyright (c) 2026, Salesforce, Inc., All rights reserved. For full license text, see the LICENSE.txt file", "$schema": "https://slds.lightningdesignsystem.com/schemas/uif-system.v1.json", "apiVersion": "1.0.0", "name": "Modal", "description": "Modals are used to display content in a layer above the app.", "structure": { "name": "root", "restrict": [ "section", "div" ], "description": "Modal container", "attributes": { "static": { "role": "dialog", "aria-modal": "true", "tabindex": "-1", "class": "slds-modal" }, "bound": { "aria-labelledby": { "prop": "headingId" }, "aria-describedby": { "prop": "contentId" } } }, "children": [ { "name": "backdrop", "restrict": [ "div" ], "description": "Creates the shaded backdrop used behind the modal.", "attributes": { "static": { "role": "presentation", "class": "slds-backdrop slds-backdrop_open" } } }, { "name": "container", "restrict": [ "div" ], "description": "Centers and sizes the modal horizontally and confines modal within viewport height", "children": [ { "name": "close", "restrict": [ "button" ], "description": "Positions the close button to the top right outside of the modal.", "attributes": { "bound": { "aria-label": { "prop": "closeLabel" } }, "static": { "class": "slds-button slds-button_icon slds-modal__close" } }, "children": [ { "name": "closeIcon", "description": "Close icon glyph", "component": "PrimitiveIcon", "attributes": { "static": { "class": "slds-button__icon slds-button__icon_large" } }, "children": [ { "name": "closeIconUse" } ] }, { "name": "closeAssistiveText", "restrict": [ "span" ], "description": "Visually hidden label announcing the close action", "slot": { "name": "closeAssistiveText" }, "attributes": { "static": { "class": "slds-assistive-text" } } } ] }, { "name": "header", "restrict": [ "header", "div" ], "description": "Creates the Modal Header container.", "children": [ { "name": "heading", "restrict": [ "h1", "h2" ], "description": "Modal title (optional)", "slot": { "name": "heading", "required": true }, "attributes": { "static": { "class": "slds-modal__title slds-hyphenate" } } }, { "name": "tagline", "restrict": [ "p" ], "description": "Optional supporting tagline displayed beneath the heading", "renderWhen": "slotFilled", "slot": { "name": "tagline" }, "children": [ { "name": "taglineLink", "restrict": [ "a" ], "description": "Optional inline link inside the tagline copy" } ], "attributes": { "static": { "class": "slds-m-top_x-small" } } } ], "attributes": { "static": { "class": "slds-modal__header" } }, "modifiers": [ { "name": "empty", "attribute": "class", "value": "slds-modal__header_empty", "description": "Marks a header with no heading content (deprecated pattern for headless modals)", "deprecated": { "message": "Use the headless content pattern (omit the header child entirely and apply the headlessContent modifier on content) instead of an empty header." } } ] }, { "name": "content", "restrict": [ "div" ], "description": "Creates the scrollable content area for the modal.", "slot": { "name": "default", "required": true }, "attributes": { "static": { "class": "slds-modal__content slds-p-around_medium" } }, "modifiers": [ { "name": "headlessContent", "attribute": "class", "value": "slds-modal__content_headless", "description": "Headless modal styling" }, { "name": "footlessContent", "attribute": "class", "value": "slds-modal__content_footless", "description": "Footless modal styling" }, { "name": "hasHiddenFooter", "attribute": "class", "value": "slds-modal__content_has-hidden-footer", "description": "Adjusts content spacing when a footer is present in the markup but visually hidden" }, { "name": "fullContent", "attribute": "class", "value": "slds-modal_full-content", "description": "Stretches the content region to fill the available area (paired with size=full)" } ] }, { "name": "menuContent", "restrict": [ "div" ], "description": "Alternate menu-style content region used when the modal acts as a menu surface", "renderWhen": { "prop": "contentLayout", "eq": "menu" }, "slot": { "name": "menu" }, "attributes": { "static": { "class": "slds-modal__menu" } } }, { "name": "footer", "restrict": [ "footer", "div" ], "description": "Creates the Modal Footer container.", "renderWhen": "slotFilled", "slot": { "name": "footer" }, "attributes": { "static": { "class": "slds-modal__footer" } }, "modifiers": [ { "name": "directional", "attribute": "class", "value": "slds-modal__footer_directional", "description": "Makes buttons inside the footer spread to both left and right." }, { "name": "hidden", "attribute": "class", "value": "slds-hide", "description": "Visually hides the footer while keeping the node in the DOM" } ], "children": [ { "name": "footerCancelButton", "attributes": { "static": { "class": "slds-button slds-button_neutral" } } }, { "name": "footerConfirmButton", "attributes": { "static": { "class": "slds-button slds-button_brand" } } } ] } ], "attributes": { "static": { "class": "slds-modal__container" } } } ], "modifiers": [ { "name": "size", "attribute": "class", "description": "Modal size", "default": "medium", "options": [ { "propValue": "small", "value": "slds-modal_small", "description": "Widens the modal to take more horizontal space than default" }, { "propValue": "medium", "value": "slds-modal_medium", "description": "Widens the modal to take more horizontal space than small" }, { "propValue": "large", "value": "slds-modal_large", "description": "Widens the modal to take more horizontal space than large" }, { "propValue": "full", "value": "slds-modal_full", "description": "Makes the modal full screen in small viewports" } ] } ] }, "states": [ { "name": "open", "type": "boolean", "description": "Whether the modal is visible" }, { "name": "closeDisabled", "type": "boolean", "description": "Whether the close affordance is disabled" } ], "accessibility": { "requirements": [ { "id": "focus-trap", "description": "Focus must be trapped within the modal when open" }, { "id": "escape-close", "description": "Pressing Escape should close the modal" }, { "id": "focus-restore", "description": "Focus should return to the triggering element when modal closes" }, { "id": "aria-modal", "description": "Modal must have aria-modal='true' and appropriate role" }, { "id": "close-label", "description": "Close affordance must expose an accessible name (aria-label or visually hidden text)" } ] }, "componentRefs": { "PrimitiveIcon": { "description": "Bare SVG icon composed directly inside the component. The host node supplies the SVG class (e.g. slds-button__icon, slds-menu__item-icon) via componentProps; PrimitiveIcon contributes the sprite-href binding.", "props": { "iconName": { "type": "string", "required": true, "description": "Sprite reference for the icon glyph" } } } }, "extensions": { "com.salesforce-ux": { "dateAdded": "2015-09-04", "genReady": false, "lbc": "lightning-modal" }, "com.salesforce-ux.customization": { "description": "Per-hook overrides for the Customization story that beat the test-value generator.", "hooks": { "--slds-c-modal-sizing-width": "50%", "--slds-c-modal-sizing-width-max": "40rem", "--slds-c-modal-sizing-width-min": "20rem", "--slds-c-modal-sizing-height": "100%", "--slds-c-modal-sizing-height-max": "none", "--slds-c-modal-sizing-height-min": "0", "--slds-c-modal-close-sizing-outline": "2px", "--slds-c-modal-footer-color-border": "var(--slds-g-color-accent-1)", "--slds-c-modal-footer-color-background": "#0f2173" } } }, "cssSource": "./modal.css", "styleApi": { "status": "stable", "ready": true }, "stateClasses": [ { "state": "open", "class": "slds-fade-in-open" } ] }