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

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

Overview

Anatomy

Rounded Nested Button

<div> <div></div> <div>Element</div> <div>Desktop (Compact)</div> <div>Mobile (Cozy)</div> </div> <div> <div>A</div> <div>Touch area</div> <div>width: 1.625rem;<br>height: 1.625rem</div> <div>width: 2rem;<br>height: 2rem;</div> </div> <div> <div>B</div> <div>Icon</div> <div>font-size: 0.75rem;<br>icon size: 0.75 x 0.75rem<br>vertically and horizontally centered</div> </div> <div> <div>C</div> <div>Button Visual</div> <div>width: 1.375rem;<br>height: 1.375rem;<br>border-radius: 1rem;<br>border: none;</div> <div>width: 1.5rem;<br>height: 1.5rem;</div> </div>

Square Nested Button

<div> <div></div> <div>Element</div> <div>Desktop (Compact)</div> <div>Mobile (Cozy)</div> </div> <div> <div>A</div> <div>Touch area</div> <div>width: 1.625rem;<br>height: 1.625rem</div> <div>width: 2rem;<br>height: 2rem;</div> </div> <div> <div>B</div> <div>Icon</div> <div>font-size: 0.75rem;<br>icon size: 0.75 x 0.75rem<br>vertically and horizontally centered</div> </div> <div> <div>C</div> <div>Button Visual</div> <div>width: 1.375rem;<br>height: 1.375rem;<br>border-radius: 0.1875rem;<br>border: none;</div> <div>width: 1.5rem;<br>height: 1.5rem;</div> </div>

Appearance

Interaction States

<p><div> <div>State</div> <div>Morning Horizon</div> <div>Evening Horizon</div> <div>Horizon HC</div> <div>Preview</div> </div> <div> <div><strong>Normal</strong></div> <div>Background: var(--sapButton_Lite_Background);<br>color: var(--sapContent_IconColor);<br>border: var(--sapContent_Transparent_Border);</div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/components/extensions/button/media1_1acc5ecbbf2bfe7b2120aff66678eceae9b5e12e5.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1acc5ecbbf2bfe7b2120aff66678eceae9b5e12e5.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1acc5ecbbf2bfe7b2120aff66678eceae9b5e12e5.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/extensions/button/media%5C_1acc5ecbbf2bfe7b2120aff66678eceae9b5e12e5.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/components/extensions/button/media_1acc5ecbbf2bfe7b2120aff66678eceae9b5e12e5.png?width=750&format=png&optimize=medium</a>" width="230" height="300"> </picture> </div> </div> <div> <div><strong>Hover</strong></div> <div>color: var(--sapContent_IconColor);<br>border: var(--sapContent_Transparent_Border);<br>background: color-mix(in srgb, var(--sapElement_Hover_Color) var(--sapElement_Hover_Mix), transparent)</div> </div> <div> <div><strong>Active</strong></div> <div>color: var(--sapContent_IconColor);<br>border: var(--sapContent_Transparent_Border);<br>background: color-mix(in srgb, var(--sapElement_Active_Color) var(--sapElement_Active_Mix), transparent)</div> </div> <div> <div><strong>Focused</strong></div> <div>background: var(--sapButton_Lite_Background)<br>border-width: 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>

Accessibility

Keyboard

The keyboard handling for the Nested Button is based on the keyboard handling of the Button component. Refer to Fiori Keyboard Interaction for full specification of the component.

Button - p.171