<a href="/wiki/display/CPDesign/Tool+Header+Button">Tool Header Button</a>

Created by Kirichev, Alexander, last modified on Jan 25, 2024

Overview

This is an extension (over style) of the Button (Horizon) and is intended to be used in the Tool Header.

FIORITECHP1-26793 - Getting issue details... STATUS

Look and feel

Tool Header Button

The Tool Header button is based on the Button (Horizon)#(Tertiary)Transparent/LiteButton, but has over-styling of the shape, size and interaction states

Desktop Specification

<p><div> <div>State</div> <div>Horizon</div> <div>Horizon HC</div> <div>Preview</div> </div> <div> <div><strong>Normal</strong></div> <div> <p>icon: 1rem;<br>padding: 0.5rem;<br>border-radius: 0.375rem</p> <p><strong>The button results in 2x2rem square shape.</strong><br><br>background: var(--sapButton_Lite_Background);<br>color: var(--sapContent_IconColor);<br>border: var(--sapContent_Transparent_Border);</p> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/components/tool-shell/tool-header-button/media1_15d864fb15bd8558850f8d3ff8a287674203be684.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_15d864fb15bd8558850f8d3ff8a287674203be684.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_15d864fb15bd8558850f8d3ff8a287674203be684.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/tool-shell/tool-header-button/media%5C_15d864fb15bd8558850f8d3ff8a287674203be684.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/components/tool-shell/tool-header-button/media_15d864fb15bd8558850f8d3ff8a287674203be684.png?width=750&format=png&optimize=medium</a>" width="520" height="880"> </picture> </div> </div> <div> <div><strong>Hover</strong></div> <div>background: var(--sapButton_Lite_Hover_Background);<br>color: var(--sapContent_IconColor);<br>border: var(--sapContent_Transparent_Border);</div> </div> <div> <div><strong>Active</strong></div> <div>background: var(--sapActiveColor);<br>color: var(--sapContent_IconColor);<br>border: var(--sapContent_Transparent_Border);</div> </div> <div> <div><strong>Focused</strong></div> <div>background: var(--sapButton_Background);<br>border:none;<br>outline: var(--sapContent_FocusStyle) var(--sapContent_FocusWidth) var(--sapContent_FocusColor);</div> </div> <div> <div><strong>Disabled</strong></div> <div>opacity: var(–sapContent_DisabledOpacity);</div> </div></p>

Mobile Specification

<div> <div>State</div> <div>Horizon</div> <div>Horizon HC</div> </div> <div> <div><strong>Normal</strong></div> <div> <p>icon: 1rem;<br>padding: 0.75rem;</p> <p><strong>The button results in 2.5x2.5rem square shape.</strong></p> </div> <div>No deltas.</div> </div> <div> <div><strong>Hover</strong></div> <div>No deltas.</div> </div> <div> <div><strong>Active</strong></div> <div>No deltas.</div> </div> <div> <div><strong>Focused</strong></div> <div>No deltas.</div> </div> <div> <div><strong>Disabled</strong></div> <div>No deltas.</div> </div>

Badge on button

<div> <div></div> <div>Horizon</div> <div>Horizon HC</div> </div> <div> <div><strong>Shape & Size</strong></div> <div>width: 0.625rem;<br>height: 0.625rem;<br>border-radius: 100%;<br>border-width: 0.0625rem; (outer border)<br>border-style: solid;</div> </div> <div> <div><strong>Position</strong></div> <div>Absolutely positioned in the top right corner of the button with a top and bottom negative margin of 0.125rem;</div> </div> <div> <div><strong>Colors</strong></div> <div>background: var(--sapContent_BadgeBackground);<br>border-color: var(--sapShell_BorderColor);</div> </div>