<a href="/wiki/pages/viewpage.action?pageId=2058534928">Tool Header (Quartz)</a>

Table of Contents

Overview

The ToolsHeader is a control that is found in most SAP Cloud Platform products. Most commonly as a part of the Tool Page Layout. The ToolsHeader inherits its functionality from the OverflowToolbar and its visual design from the ShellBar.

Look and Feel

&#x3C;p&#x3E;&#x3C;div&#x3E; &#x3C;div&#x3E;&#x3C;strong&#x3E;Quartz Light&#x3C;/strong&#x3E;&#x3C;/div&#x3E; &#x3C;div&#x3E; &#x3C;picture&#x3E; &#x3C;source type=&#x22;image/webp&#x22; srcset=&#x22;/content/dam/sapcom/design-system/btp/archive/fiori-3-quartz/components/tool-header-quartz/media1_18d4dd1e6f979e406ca635291f973f3a481cf54f2.png?width=2000&#x26;format=webply&#x26;optimize=medium&#x22; media=&#x22;(min-width: 600px)&#x22;&#x3E; &#x3C;source type=&#x22;image/webp&#x22; srcset=&#x22;./media_18d4dd1e6f979e406ca635291f973f3a481cf54f2.png?width=750&#x26;format=webply&#x26;optimize=medium&#x22;&#x3E; &#x3C;source type=&#x22;image/png&#x22; srcset=&#x22;./media_18d4dd1e6f979e406ca635291f973f3a481cf54f2.png?width=2000&#x26;format=png&#x26;optimize=medium&#x22; media=&#x22;(min-width: 600px)&#x22;&#x3E; &#x3C;img loading=&#x22;lazy&#x22; alt=&#x22;&#x22; src=&#x22;&#x3C;a href=&#x22;https://www.sap.com/design-system/btp/archive/fiori-3-quartz/components/tool-header-quartz/media%5C_18d4dd1e6f979e406ca635291f973f3a481cf54f2.png?width=750%5C&#x26;format=png%5C&#x26;optimize=medium&#x22;&#x3E;https://www.sap.com/design-system/btp/archive/fiori-3-quartz/components/tool-header-quartz/media_18d4dd1e6f979e406ca635291f973f3a481cf54f2.png?width=750&#x26;format=png&#x26;optimize=medium&#x3C;/a&#x3E;&#x22; width=&#x22;1761&#x22; height=&#x22;359&#x22;&#x3E; &#x3C;/picture&#x3E; &#x3C;/div&#x3E; &#x3C;/div&#x3E; &#x3C;div&#x3E; &#x3C;div&#x3E;&#x3C;strong&#x3E;Quartz Dark&#x3C;/strong&#x3E;&#x3C;/div&#x3E; &#x3C;div&#x3E; &#x3C;picture&#x3E; &#x3C;source type=&#x22;image/webp&#x22; srcset=&#x22;/content/dam/sapcom/design-system/btp/archive/fiori-3-quartz/components/tool-header-quartz/media1_1a644a30b39faa1172e236a35e30ef7379daf30e0.png?width=2000&#x26;format=webply&#x26;optimize=medium&#x22; media=&#x22;(min-width: 600px)&#x22;&#x3E; &#x3C;source type=&#x22;image/webp&#x22; srcset=&#x22;./media_1a644a30b39faa1172e236a35e30ef7379daf30e0.png?width=750&#x26;format=webply&#x26;optimize=medium&#x22;&#x3E; &#x3C;source type=&#x22;image/png&#x22; srcset=&#x22;./media_1a644a30b39faa1172e236a35e30ef7379daf30e0.png?width=2000&#x26;format=png&#x26;optimize=medium&#x22; media=&#x22;(min-width: 600px)&#x22;&#x3E; &#x3C;img loading=&#x22;lazy&#x22; alt=&#x22;&#x22; src=&#x22;&#x3C;a href=&#x22;https://www.sap.com/design-system/btp/archive/fiori-3-quartz/components/tool-header-quartz/media%5C_1a644a30b39faa1172e236a35e30ef7379daf30e0.png?width=750%5C&#x26;format=png%5C&#x26;optimize=medium&#x22;&#x3E;https://www.sap.com/design-system/btp/archive/fiori-3-quartz/components/tool-header-quartz/media_1a644a30b39faa1172e236a35e30ef7379daf30e0.png?width=750&#x26;format=png&#x26;optimize=medium&#x3C;/a&#x3E;&#x22; width=&#x22;1761&#x22; height=&#x22;359&#x22;&#x3E; &#x3C;/picture&#x3E; &#x3C;/div&#x3E; &#x3C;/div&#x3E; &#x3C;div&#x3E; &#x3C;div&#x3E;&#x3C;strong&#x3E;HCB&#x3C;/strong&#x3E;&#x3C;/div&#x3E; &#x3C;div&#x3E; &#x3C;picture&#x3E; &#x3C;source type=&#x22;image/webp&#x22; srcset=&#x22;/content/dam/sapcom/design-system/btp/archive/fiori-3-quartz/components/tool-header-quartz/media1_161fdea078194a469235a979e7c941adff6a20c7f.png?width=2000&#x26;format=webply&#x26;optimize=medium&#x22; media=&#x22;(min-width: 600px)&#x22;&#x3E; &#x3C;source type=&#x22;image/webp&#x22; srcset=&#x22;./media_161fdea078194a469235a979e7c941adff6a20c7f.png?width=750&#x26;format=webply&#x26;optimize=medium&#x22;&#x3E; &#x3C;source type=&#x22;image/png&#x22; srcset=&#x22;./media_161fdea078194a469235a979e7c941adff6a20c7f.png?width=2000&#x26;format=png&#x26;optimize=medium&#x22; media=&#x22;(min-width: 600px)&#x22;&#x3E; &#x3C;img loading=&#x22;lazy&#x22; alt=&#x22;&#x22; src=&#x22;&#x3C;a href=&#x22;https://www.sap.com/design-system/btp/archive/fiori-3-quartz/components/tool-header-quartz/media%5C_161fdea078194a469235a979e7c941adff6a20c7f.png?width=750%5C&#x26;format=png%5C&#x26;optimize=medium&#x22;&#x3E;https://www.sap.com/design-system/btp/archive/fiori-3-quartz/components/tool-header-quartz/media_161fdea078194a469235a979e7c941adff6a20c7f.png?width=750&#x26;format=png&#x26;optimize=medium&#x3C;/a&#x3E;&#x22; width=&#x22;1761&#x22; height=&#x22;359&#x22;&#x3E; &#x3C;/picture&#x3E; &#x3C;/div&#x3E; &#x3C;/div&#x3E; &#x3C;div&#x3E; &#x3C;div&#x3E;&#x3C;strong&#x3E;HCW&#x3C;/strong&#x3E;&#x3C;/div&#x3E; &#x3C;div&#x3E; &#x3C;picture&#x3E; &#x3C;source type=&#x22;image/webp&#x22; srcset=&#x22;/content/dam/sapcom/design-system/btp/archive/fiori-3-quartz/components/tool-header-quartz/media1_1ef0a624c7a4a0c7e2cd2f8b841f6271e7fe225f6.png?width=2000&#x26;format=webply&#x26;optimize=medium&#x22; media=&#x22;(min-width: 600px)&#x22;&#x3E; &#x3C;source type=&#x22;image/webp&#x22; srcset=&#x22;./media_1ef0a624c7a4a0c7e2cd2f8b841f6271e7fe225f6.png?width=750&#x26;format=webply&#x26;optimize=medium&#x22;&#x3E; &#x3C;source type=&#x22;image/png&#x22; srcset=&#x22;./media_1ef0a624c7a4a0c7e2cd2f8b841f6271e7fe225f6.png?width=2000&#x26;format=png&#x26;optimize=medium&#x22; media=&#x22;(min-width: 600px)&#x22;&#x3E; &#x3C;img loading=&#x22;lazy&#x22; alt=&#x22;&#x22; src=&#x22;&#x3C;a href=&#x22;https://www.sap.com/design-system/btp/archive/fiori-3-quartz/components/tool-header-quartz/media%5C_1ef0a624c7a4a0c7e2cd2f8b841f6271e7fe225f6.png?width=750%5C&#x26;format=png%5C&#x26;optimize=medium&#x22;&#x3E;https://www.sap.com/design-system/btp/archive/fiori-3-quartz/components/tool-header-quartz/media_1ef0a624c7a4a0c7e2cd2f8b841f6271e7fe225f6.png?width=750&#x26;format=png&#x26;optimize=medium&#x3C;/a&#x3E;&#x22; width=&#x22;1761&#x22; height=&#x22;359&#x22;&#x3E; &#x3C;/picture&#x3E; &#x3C;/div&#x3E; &#x3C;/div&#x3E;&#x3C;/p&#x3E;

Layout and Structure

For usage recommendations of the various elements see the Cloud Platform Design System article.

<div> <div></div> <div>Element</div> <div>Description</div> </div> <div> <div><strong>A</strong></div> <div><strong>Menu Item</strong></div> <div>Shows / Hides the vertical navigation panel. See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2075534845">Vertical Navigation (aka: Side Navigation control) (Quartz)</a> for full specification.</div> </div> <div> <div><strong>B</strong></div> <div><strong>Logo</strong></div> <div>An image or SVG of a company logo.</div> </div> <div> <div><strong>C</strong></div> <div><strong>Product Name</strong></div> <div>A title that displays the name of the product. See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2020615116">Typography (Fiori 3)</a> for full specifications.</div> </div> <div> <div><strong>D</strong></div> <div><strong>Second Title</strong></div> <div>An optional subtitle for the product. See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2046200429">Label (Fiori 3)</a> for full specifications.</div> </div> <div> <div><strong>E</strong></div> <div><strong>Search Icon</strong></div> <div>Shows / Hides the global search field</div> </div> <div> <div><strong>F</strong></div> <div><strong>User-Defined Action</strong></div> <div>Custom action or actions which use icon buttons</div> </div> <div> <div><strong>G</strong></div> <div><strong>Notification Icon</strong></div> <div>Shows / Hides the notification popup. See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2068432670">Notifications (Fiori 3)</a> for full specifications.</div> </div> <div> <div><strong>H</strong></div> <div><strong>User Avatar</strong></div> <div>Shows / Hides the user menu popup. See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2104434669">User Menu (Fiori 3)</a> for full specifications.</div> </div> <div> <div><strong>I</strong></div> <div><strong>Product Switch</strong></div> <div>Shows / Hides the product switch popup. See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2135951135">Product Switch (Fiori 3)</a> for full specifications.</div> </div>

All Form Factor Specifications

The ToolHeader supports a larger set of over-styled controls. See ShellBar (Fiori 3) for the specification of the basic set of controls.

<div> <div></div> <div>Element</div> <div>Quartz Light</div> <div>Quartz Dark</div> <div>HCB</div> <div>HCW</div> </div> <div> <div><strong>B</strong></div> <div><strong>Logo</strong></div> <div>height: 1.625rem;<br>width: auto;</div> </div> <div> <div><strong>H</strong></div> <div><strong>Avatar</strong></div> <div>width: 1.75rem;<br>height: 1.75rem;</div> </div> <div> <div><strong>J1</strong></div> <div><strong>Padding</strong></div> <div> <p>See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2052690369">ShellBar (Fiori 3)</a> for reference.</p> <p><strong>With Menu Icon</strong><br>padding: 0 0.5rem;</p> <p><strong>Without Menu Icon</strong><br>padding: 0 0.5rem 0 1rem;</p> </div> </div> <div> <div><strong>J2</strong></div> <div><strong>Space Between Elements</strong></div> <div>space: 0.5rem;</div> </div>

Buttons

See ShellBar (Fiori 3) for full specifications.

LIMITED SCOPE SUPPORT

The ToolHeader supports only text and icon buttons in their Default, Transparent, Back, and Up types. The Menu button is supported in its Emphasized, Default, and Transparent styles.

Texts, Titles, and Labels

See Typography (Fiori 3) for full specifications.

LIMITED SCOPE SUPPORT

The ToolHeader supports only single-line text and truncation. This applies to Texts, Titles, and Labels. Consider using small and normal size texts or title headings of H4, H5, H6. Avoid using text wrapping.

<div> <div>Element</div> <div>Quartz Light</div> <div>Quartz Dark</div> <div>HCB</div> <div>HCW</div> </div> <div> <div><strong>Text</strong></div> <div>color: --sapShell_TextColor;</div> </div> <div> <div><strong>Title</strong></div> <div>color: --sapShell_TextColor;<br>font-weight: bold;<br>padding: 0 0.625rem;<br>text-overflow: ellipsis;</div> </div> <div> <div><strong>Label</strong></div> <div>color: --sapShell_TextColor;</div> </div>

Icons

See IconControl (Fiori 3) for full specification

LIMITED SCOPE SUPPORT

The ToolHeader supports only icon color enumeration. The support extends to both icons and backgrounds. Interaction state colors will not be supported.

<div> <div>Element</div> <div>Quartz Light</div> <div>Quartz Dark</div> <div>HCB</div> <div>HCW</div> </div> <div> <div><strong>Icon</strong></div> <div> <p><strong>Default</strong> color: --sapShell_TextColor;</p> <p><strong>Contrast</strong> color: --sapShell_TextColor;</p> <p><strong>Positive</strong><br>color: --sapShell_PositiveColor;</p> <p><strong>Critical</strong><br>color: --sapShell_CriticalColor;</p> <p><strong>Negative</strong><br>color: --sapShell_NegativeColor;</p> <p><strong>Neutral</strong><br>color: --sapShell_NeutralColor;</p> </div> <div>For HC specifications refer to <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2058533062">IconControl (Fiori 3)</a></div> </div> <div> <div><strong>Icon Background</strong></div> <div> <p><strong>Default</strong> color: --sapShell_TextColor;<br>background: transparent;</p> <p><strong>Contrast</strong> color: --sapShell_TextColor;<br>background: transparent;</p> <p><strong>Positive</strong> color: --sapTextColor;<br>background: --sapShell_PositiveColor;</p> <p><strong>Critical</strong> color: --sapTextColor;<br>color: --sapShell_CriticalColor;</p> <p><strong>Negative</strong> color: --sapTextColor;<br>background: --sapShell_NegativeColor;</p> <p><strong>Neutral</strong> color: --sapTextColor;<br>background: --sapShell_NeutralColor;</p> </div> <div> <p><strong>Default</strong> color: --sapShell_TextColor;<br>background: transparent;</p> <p><strong>Contrast</strong> color: --sapShell_TextColor;<br>background: transparent;</p> <p><strong>Positive</strong><br>color: --sapContent_ContrastTextColor;</p> <p><strong>Critical</strong><br>color: --sapContent_ContrastTextColor;</p> <p><strong>Negative</strong><br>color: --sapContent_ContrastTextColor;</p> <p><strong>Neutral</strong><br>color: --sapContent_ContrastTextColor;</p> </div> </div>

Tabs

See Horizontal Navigation (Quartz) for full specification.

Object Status

See ObjectStatus (Fiori 3) for full specification.

LIMITED SCOPE SUPPORT

The ToolHeader supports ObjectStatus in its semantic form. No industry specific color support.

<div> <div>Element</div> <div>Quartz Light</div> <div>Quartz Dark</div> <div>HCB</div> <div>HCW</div> </div> <div> <div><strong>Object Status</strong></div> <div> <p><strong>Positive</strong><br>color: --sapShell_PositiveColor;<br>text-shadow: none;</p> <p><strong>Critical</strong><br>color: --sapShell_CriticalColor;<br>text-shadow: none;</p> <p><strong>Negative</strong><br>color: --sapShell_NegativeColor;<br>text-shadow: none;</p> <p><strong>Neutral</strong><br>color: --sapShell_NeutralColor;<br>text-shadow: none;</p> <p><strong>Information</strong><br>color: --sapShell_InformativeColor;<br>text-shadow: none;</p> </div> <div>For HC specifications please refer to <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2057761379">ObjectStatus (Fiori 3)</a></div> </div> <div> <div><strong>Inverted Object Status</strong></div> <div>color: --sapTextColor;<br>text-shadow: none;</div> <div>color: --sapContent_ContrastTextColor;<br>text-shadow: none;</div> </div> <div> <div><strong><br></strong></div> <div> <p><strong>Positive</strong><br>background: --sapShell_PositiveColor;</p> <p><strong>Critical</strong><br>color: --sapShell_CriticalColor;</p> <p><strong>Negative</strong><br>background: --sapShell_NegativeColor;</p> <p><strong>Neutral</strong><br>background: --sapShell_NeutralColor;</p> <p><strong>Information</strong><br>background: --sapShell_InformativeColor;</p> </div> </div>