<a href="/wiki/display/CPDesign/Command+Palette">Command Palette</a>
- Created by Kirichev, Alexander, last modified on Jan 25, 2024
Overview
Look and Feel
<p><div> <div>Morning Horizon</div> <div>Evening Horizon</div> <div>Horizon HCW</div> <div>Horizon HCB</div> </div> <div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/components/components/command-palette/media1_1f0680ccf96e1fc2ca263f2e818c87d2fb4465ad5.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1f0680ccf96e1fc2ca263f2e818c87d2fb4465ad5.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1f0680ccf96e1fc2ca263f2e818c87d2fb4465ad5.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/btp/components/components/command-palette/media%5C_1f0680ccf96e1fc2ca263f2e818c87d2fb4465ad5.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/components/components/command-palette/media_1f0680ccf96e1fc2ca263f2e818c87d2fb4465ad5.png?width=750&format=png&optimize=medium</a>" width="1280" height="1214"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/components/components/command-palette/media1_114ebbbc6b042bf0e3ff7725c1ad8016b52f1bb33.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_114ebbbc6b042bf0e3ff7725c1ad8016b52f1bb33.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_114ebbbc6b042bf0e3ff7725c1ad8016b52f1bb33.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/btp/components/components/command-palette/media%5C_114ebbbc6b042bf0e3ff7725c1ad8016b52f1bb33.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/components/components/command-palette/media_114ebbbc6b042bf0e3ff7725c1ad8016b52f1bb33.png?width=750&format=png&optimize=medium</a>" width="1280" height="1214"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/components/components/command-palette/media1_12e9c54da5ae1615799296ea63388d78ffb4db0bd.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_12e9c54da5ae1615799296ea63388d78ffb4db0bd.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_12e9c54da5ae1615799296ea63388d78ffb4db0bd.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/btp/components/components/command-palette/media%5C_12e9c54da5ae1615799296ea63388d78ffb4db0bd.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/components/components/command-palette/media_12e9c54da5ae1615799296ea63388d78ffb4db0bd.png?width=750&format=png&optimize=medium</a>" width="1280" height="1214"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/components/components/command-palette/media1_1c295ab396d88380166127e1d9a7d8b2b50602705.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1c295ab396d88380166127e1d9a7d8b2b50602705.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1c295ab396d88380166127e1d9a7d8b2b50602705.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/btp/components/components/command-palette/media%5C_1c295ab396d88380166127e1d9a7d8b2b50602705.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/components/components/command-palette/media_1c295ab396d88380166127e1d9a7d8b2b50602705.png?width=750&format=png&optimize=medium</a>" width="1280" height="1214"> </picture> </div> </div></p>
Anatomy
Desktop Specification
<div> <div></div> <div></div> <div>All Horizon Themes</div> </div> <div> <div><strong>A</strong></div> <div><strong>Container </strong></div> <div> <p>For detailed visual specifications, please follow <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FNavigation%2BMenus%23NavigationMenus-DropdownContainer">Navigation Menus#DropdownContainer</a>. The dropdown appears behind the command palette field.</p> <p>win-width: 20rem;<br>max-width: 30rem;</p> <p>The internal padding is 0.5rem;</p> </div> </div> <div> <div><strong>B</strong></div> <div><strong>Spacer</strong></div> <div>height: 0.75rem;</div> </div> <div> <div><strong>C</strong></div> <div><strong>List Item</strong></div> <div>For detailed visual specifications, please follow: <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FVertical%2BNavigation%23VerticalNavigation-ParentNavigationItem">Vertical Navigation#ParentNavigationItem</a></div> </div> <div> <div><strong>D</strong></div> <div><strong>Group Item</strong></div> <div>For detailed visual specifications, please follow: <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FVertical%2BNavigation%23VerticalNavigation-GroupNavigationItem">Vertical Navigation#GroupNavigationItem</a></div> </div> <div> <div><strong>E</strong></div> <div><strong>Footer</strong></div> <div>For detailed visual specifications, please follow: <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2698912554">Bar (Horizon)</a><br>border: 0;<br>padding-left: 0.5rem;<br>padding-right: 0.5rem;</div> </div> <div> <div><strong>F</strong></div> <div><strong>Prompt</strong></div> <div>The Command Palette Prompt inherits the visual and interaction states from <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FTool%2BHeader%2BSearch">Tool Header Search</a>. There are some deviations and enhancements that are listed below</div> </div>
Command Palette Prompt
<div> <div></div> <div>Element</div> <div>All Horizon Themes</div> </div> <div> <div><strong><br></strong></div> <div><strong>Container</strong></div> <div> <p><strong>Normal & Hover</strong><br>width: 16rem;<br>inherit border-radius from the search field.</p> <p><strong>Focused & Active</strong><br>width: 29rem;<br>border-radius: 0.375rem;</p> </div> </div> <div> <div><strong>F1</strong></div> <div><strong>Icon</strong></div> <div>Disabled <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FButtons%23Buttons-NestedButton">Nested Button</a> with opacity set to 1;<br>border: none;</div> </div> <div> <div><strong>F2</strong></div> <div><strong>Slash <br>Navigation Separator</strong></div> <div>font-family: var(--sapFontSemiboldFamily);<br>color: var(--sapField_TextColor);<br>margin-right: 0.1875rem;</div> </div> <div> <div><strong>F3</strong></div> <div><strong>Parent item</strong></div> <div>font-family: var(--sapFontSemiboldFamily);<br>color: var(--sapField_TextColor);<br>margin-right: 0.1875rem;</div> </div> <div> <div><strong>F4</strong></div> <div><strong>Suggestion</strong></div> <div>color: var(--sapField_PlaceholderTextColor);</div> </div>
Interaction States
List item
<div> <div></div> <div></div> <div>All Horizon Themes</div> </div> <div> <div><strong>A</strong></div> <div><strong>Container</strong></div> <div> <p>width: 100%;<br>padding: 0.5rem;<br>border-radius: var(--sapNavigation_BorderRadius);<br>transition: var(--sapNavigation_Transition);<br>color: var(--sapList_TextColor);</p> <p><strong>Normal</strong><br>background: var(–sapList_Background);<br>border: var(--sapContent_Transparent_Border);</p> <p><strong>Hover/Selected with keyboard</strong><br>background: var(–sapList_Hover_Background);<br>border: var(--sapContent_Transparent_Border);</p> <p><strong>Active</strong><br>background: var(–sapList_Active_Background);<br>border: var(--sapContent_Transparent_Border);</p> </div> </div> <div> <div><strong>B</strong></div> <div><strong>Title</strong></div> <div>font-size: var(--sapFontSize);<br>color: var(--sapList_TextColor);</div> </div> <div> <div><strong>C</strong></div> <div><strong>Icon</strong></div> <div>width: 1rem;<br>height: 1rem;<br>margin-right: 0.5rem;</div> </div> <div> <div><strong>D</strong></div> <div><strong><br></strong></div> <div> <p>This area consists of</p> <p><a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FInfo%2BLabel">Info Label</a></p> <p>and</p> <p><a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2698914064">Label (Horizon)</a></p> <p>:</p> <p><strong>Info Label has some deviations from the Visual design of the components.</strong><br>background-color: var(--sapGroup_ContentBackground);</p> </div> </div>
Tablet & Mobile Specification
<div> <div></div> <div></div> <div>All Horizon Themes</div> </div> <div> <div><strong>A</strong></div> <div><strong>Container</strong></div> <div>padding: 0.75rem 0.5rem;</div> </div> <div> <div><strong>B</strong></div> <div><strong>Title</strong></div> <div>No deltas.</div> </div> <div> <div><strong>C</strong></div> <div><strong>Icon</strong></div> <div>No deltas.</div> </div> <div> <div><strong>D</strong></div> <div><strong><br></strong></div> <div>No deltas.</div> </div>