{ "_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": "AppLauncher", "description": "Modal dialog that surfaces the user's available apps and items, with a search field, an App Exchange action, and a draggable grid of app tiles grouped into expandable sections.", "extensions": { "com.salesforce-ux": { "genReady": false } }, "cssSource": "./appLauncher.css", "styleApi": { "status": "stable", "ready": true }, "structure": { "name": "appLauncher", "restrict": [ "section" ], "description": "Root app-launcher node, rendered as a large modal dialog that carries both the modal classes and the app-launcher hook class.", "attributes": { "static": { "class": "slds-modal slds-fade-in-open slds-modal_large slds-app-launcher" } }, "children": [ { "name": "container", "restrict": [ "div" ], "description": "Modal container that frames the dialog content.", "attributes": { "static": { "class": "slds-modal__container" } }, "children": [ { "name": "closeButton", "restrict": [ "button" ], "description": "Modal close icon button positioned in the top corner of the dialog.", "attributes": { "static": { "class": "slds-button slds-button_icon slds-modal__close" } }, "children": [ { "name": "closeIcon", "description": "Close glyph rendered inside the close button.", "attributes": { "static": { "class": "slds-button__icon slds-button__icon_large" } }, "component": "PrimitiveIcon" }, { "name": "closeAssistiveText", "restrict": [ "span" ], "description": "Visually hidden label for the close button.", "attributes": { "static": { "class": "slds-assistive-text" } } } ] }, { "name": "header", "restrict": [ "div" ], "description": "Dialog header row containing the title, search field, and App Exchange action, laid out as a spread grid.", "attributes": { "static": { "class": "slds-modal__header slds-grid slds-grid_align-spread slds-grid_vertical-align-center" } }, "children": [ { "name": "headerTitle", "restrict": [ "h1", "h2", "h3" ], "description": "Dialog title labelling the modal.", "attributes": { "static": { "class": "slds-text-heading_medium" } } }, { "name": "headerSearch", "restrict": [ "div" ], "description": "Header search wrapper that scopes app-launcher styling around the form-element.", "attributes": { "static": { "class": "slds-app-launcher__header-search" } }, "children": [ { "name": "searchFormElement", "restrict": [ "div" ], "description": "Form-element wrapper for the search input and its label.", "attributes": { "static": { "class": "slds-form-element" } }, "children": [ { "name": "searchLabel", "restrict": [ "label" ], "description": "Visually hidden label associated with the search input.", "attributes": { "static": { "class": "slds-form-element__label slds-assistive-text" } } }, { "name": "searchControl", "restrict": [ "div" ], "description": "Form-element control that hosts the search input and its leading icon.", "attributes": { "static": { "class": "slds-form-element__control slds-input-has-icon slds-input-has-icon_left" } }, "children": [ { "name": "searchIcon", "description": "Search glyph positioned at the inline-start edge of the search input.", "attributes": { "static": { "class": "slds-input__icon" } }, "component": "PrimitiveIcon" }, { "name": "searchInput", "restrict": [ "input" ], "description": "Search input for filtering apps by name.", "attributes": { "static": { "class": "slds-input" } } } ] } ] } ] }, { "name": "appExchangeButton", "restrict": [ "button" ], "description": "Neutral button that links out to the App Exchange.", "attributes": { "static": { "class": "slds-button slds-button_neutral" } } } ] }, { "name": "content", "restrict": [ "div" ], "description": "Modal content region carrying the app-launcher content hook plus standard modal content spacing.", "attributes": { "static": { "class": "slds-modal__content slds-app-launcher__content slds-p-around_medium" } }, "children": [ { "name": "section", "restrict": [ "div" ], "description": "Expandable section that groups a labelled list of apps or items inside the launcher.", "repeats": true, "attributes": { "static": { "class": "slds-section slds-is-open" } }, "children": [ { "name": "sectionTitle", "restrict": [ "h3" ], "description": "Section heading that wraps the expand/collapse toggle button.", "attributes": { "static": { "class": "slds-section__title" } }, "children": [ { "name": "sectionToggle", "restrict": [ "button" ], "description": "Toggle that expands or collapses the section's content.", "attributes": { "static": { "class": "slds-button slds-section__title-action" } }, "children": [ { "name": "sectionToggleIcon", "description": "Chevron icon that rotates as the section expands or collapses.", "attributes": { "static": { "class": "slds-section__title-action-icon slds-button__icon slds-button__icon_left" } }, "component": "PrimitiveIcon" }, { "name": "sectionToggleLabel", "restrict": [ "span" ], "description": "Truncated section label rendered inside the toggle.", "attributes": { "static": { "class": "slds-truncate" } } } ] } ] }, { "name": "sectionContent", "restrict": [ "div" ], "description": "Expanded body of a section, hosting either the draggable tile grid or a flat list of item links.", "attributes": { "static": { "class": "slds-section__content" } }, "children": [ { "name": "dragLiveRegion", "restrict": [ "div" ], "description": "Visually hidden live region used to announce drag-and-drop position changes to assistive tech.", "attributes": { "static": { "class": "slds-assistive-text" } } }, { "name": "tileGrid", "restrict": [ "ul" ], "description": "Responsive grid of app tiles, pull-padded to align with the modal edges.", "attributes": { "static": { "class": "slds-grid slds-grid_pull-padded slds-wrap" } }, "children": [ { "name": "tileCell", "restrict": [ "li" ], "description": "Responsive grid cell wrapping a single app tile.", "repeats": true, "attributes": { "static": { "class": "slds-p-horizontal_small slds-size_1-of-1 slds-medium-size_1-of-3" } }, "children": [ { "name": "tile", "restrict": [ "div" ], "description": "App tile card that pairs an icon/avatar figure with a text body and supports drag-and-drop reordering.", "attributes": { "static": { "class": "slds-app-launcher__tile slds-text-link_reset" } }, "children": [ { "name": "tileFigure", "restrict": [ "div" ], "description": "Figure region of the tile that holds the app avatar and the drag/reorder handle.", "attributes": { "static": { "class": "slds-app-launcher__tile-figure" } }, "children": [ { "name": "tileAvatar", "restrict": [ "span" ], "description": "Avatar showing the app's icon or initials.", "attributes": { "static": { "class": "slds-avatar slds-avatar_large" } }, "children": [ { "name": "tileAvatarInitials", "restrict": [ "abbr" ], "description": "Initials rendered inside the avatar when no image is provided.", "attributes": { "static": { "class": "slds-avatar__initials" } } } ] }, { "name": "tileReorderWrapper", "restrict": [ "div" ], "description": "Vertical spacer that positions the reorder handle below the avatar.", "attributes": { "static": { "class": "slds-m-top_xxx-small" } }, "children": [ { "name": "tileReorderButton", "restrict": [ "button" ], "description": "Icon button toggled to grab the tile for keyboard reordering.", "attributes": { "static": { "class": "slds-button slds-button_icon" } }, "children": [ { "name": "tileReorderIcon", "description": "Rows glyph rendered inside the reorder button.", "attributes": { "static": { "class": "slds-button__icon" } }, "component": "PrimitiveIcon" }, { "name": "tileReorderAssistiveText", "restrict": [ "span" ], "description": "Visually hidden label for the reorder action.", "attributes": { "static": { "class": "slds-assistive-text" } } } ] } ] } ] }, { "name": "tileBody", "restrict": [ "div" ], "description": "Body region of the tile that holds the app title link, description, and optional tooltip.", "attributes": { "static": { "class": "slds-app-launcher__tile-body" } }, "children": [ { "name": "tileTitleLink", "restrict": [ "a" ], "description": "Link rendering the app title.", "attributes": { "static": {} } }, { "name": "tileDescription", "restrict": [ "p" ], "description": "Paragraph describing the app, optionally truncated with a More button that reveals a tooltip.", "attributes": { "static": {} }, "children": [ { "name": "tileMoreButton", "restrict": [ "button" ], "description": "Inline text-link button that toggles the tile's overflow tooltip.", "attributes": { "static": { "class": "slds-button slds-button_reset slds-text-link" } } } ] }, { "name": "tileTooltip", "restrict": [ "div" ], "description": "Popover tooltip that reveals the tile's full description.", "attributes": { "static": { "class": "slds-popover slds-popover_tooltip slds-nubbin_top-right slds-hide" } }, "children": [ { "name": "tileTooltipBody", "restrict": [ "div" ], "description": "Inner body of the tile tooltip.", "attributes": { "static": { "class": "slds-popover__body" } } } ] } ] } ] } ] } ] }, { "name": "itemList", "restrict": [ "ul" ], "description": "Flat wrapping list of secondary items (non-tile) shown beneath the main tile grid.", "attributes": { "static": { "class": "slds-grid slds-wrap" } }, "children": [ { "name": "itemCell", "restrict": [ "li" ], "description": "Grid cell wrapping a single item link.", "repeats": true, "attributes": { "static": { "class": "slds-col_padded slds-p-vertical_xx-small slds-size_1-of-5" } }, "children": [ { "name": "itemLink", "restrict": [ "a" ], "description": "Truncated link to a secondary item.", "attributes": { "static": { "class": "slds-truncate" } } } ] } ] } ] } ] } ] } ] } ] }, "stateClasses": [ { "state": "draggable", "class": "slds-is-draggable" }, { "state": "grabbed", "class": "slds-is-grabbed" }, { "state": "selected", "class": "slds-is-selected" }, { "state": "open", "class": "slds-is-open" } ], "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" } } } }, "states": [ { "name": "draggable", "type": "boolean", "description": "Whether the component is in the draggable state" }, { "name": "grabbed", "type": "boolean", "description": "Whether the component is in the grabbed state" }, { "name": "selected", "type": "boolean", "description": "Whether the component is in the selected state" }, { "name": "open", "type": "boolean", "description": "Whether the component is in the open state" } ] }