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

Created by Milanov, Kalin, last modified on Feb 09, 2024

Obsolete Specification

This specification is now obsolete. Its contents are no longer relevant. Please do not use.

Overview

Look and Feel

High Contrast look and feel are identical to Button (Horizon).

<p><div> <div>Morning Horizon</div> <div>Evening Horizon</div> <div>Horizon HCB</div> <div>Horizon HCW</div> </div> <div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/generative-ai/ai-button/media1_125ab6e0ec983983b40785dea755ec6902123a113.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_125ab6e0ec983983b40785dea755ec6902123a113.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_125ab6e0ec983983b40785dea755ec6902123a113.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/patterns/generative-ai/ai-button/media%5C_125ab6e0ec983983b40785dea755ec6902123a113.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/generative-ai/ai-button/media_125ab6e0ec983983b40785dea755ec6902123a113.png?width=750&format=png&optimize=medium</a>" width="832" height="622"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/generative-ai/ai-button/media1_17d2d4b67ac70316a2413a8a4cf02a9f6f69d58ba.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_17d2d4b67ac70316a2413a8a4cf02a9f6f69d58ba.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_17d2d4b67ac70316a2413a8a4cf02a9f6f69d58ba.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/patterns/generative-ai/ai-button/media%5C_17d2d4b67ac70316a2413a8a4cf02a9f6f69d58ba.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/generative-ai/ai-button/media_17d2d4b67ac70316a2413a8a4cf02a9f6f69d58ba.png?width=750&format=png&optimize=medium</a>" width="832" height="622"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/generative-ai/ai-button/media1_191027fa46c5e8337351d84aeca635509c932e587.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_191027fa46c5e8337351d84aeca635509c932e587.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_191027fa46c5e8337351d84aeca635509c932e587.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/patterns/generative-ai/ai-button/media%5C_191027fa46c5e8337351d84aeca635509c932e587.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/generative-ai/ai-button/media_191027fa46c5e8337351d84aeca635509c932e587.png?width=750&format=png&optimize=medium</a>" width="832" height="622"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/generative-ai/ai-button/media1_1b6ab2d4d568282f532d6cbda4e55a20bc7d7eecd.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1b6ab2d4d568282f532d6cbda4e55a20bc7d7eecd.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1b6ab2d4d568282f532d6cbda4e55a20bc7d7eecd.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/patterns/generative-ai/ai-button/media%5C_1b6ab2d4d568282f532d6cbda4e55a20bc7d7eecd.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/generative-ai/ai-button/media_1b6ab2d4d568282f532d6cbda4e55a20bc7d7eecd.png?width=750&format=png&optimize=medium</a>" width="832" height="622"> </picture> </div> </div></p>

Anatomy

The AI Button is a different visualization of the Button component. See Button (Horizon) for reference specifications.

Desktop Specification

High Contrast specification is identical to Button (Horizon).

General Specification

<div> <div>UI Element</div> <div>All Horizon Themes</div> </div> <div> <div>Button</div> <div> <p><strong>Hit Area</strong><br>height: 2rem;</p> <p><strong>Button Visual</strong> height: 1.625rem;display: inline-flex;<br>padding: 0.3125rem 0.625rem;<br>justify-content: center;<br>align-items: center;<br>gap: 0.25rem;<br>border-radius: 0.375rem;<br>border: none;</p> </div> </div> <div> <div>Text</div> <div>font-size: var(--sapFontSize);<br>font-weight: var(--sapFontSemiboldFamily);</div> </div> <div> <div>Icon</div> <div> <p>width: 1rem;<br>height: 1rem;</p> <p>icon: sap-icon://ai; //always use icon and text</p> </div> </div>

Primary Button

<div> <div>Visual State</div> <div>All Horizon Themes</div> </div> <div> <div>Normal</div> <div>background: var(--sapAIBrandColor);color: var(–sapContent_ContrastTextColor);<br>border: var(--sapContent_Transparent_Border);</div> </div> <div> <div>Hover</div> <div>background: color-mix(in srgb var(--sapElement_Hover_Color) var(--sapElement_Hover_Mix), var(–sapAIBrandColor));</div> </div> <div> <div>Active</div> <div>background: color-mix(in srgb var(--sapElement_Active_Color) var(--sapElement_Active_Mix), var(–sapAIBrandColor));</div> </div> <div> <div>Focused</div> <div>border: solid 0.0625rem var(--sapElement_ContrastFocusColor);<br>outline: var(--sapContent_FocusStyle) var(--sapContent_FocusWidth) var(–sapAIContent_FocusColor);</div> </div> <div> <div>Disabled</div> <div>opacity: 0.4;</div> </div>

Secondary Button

<div> <div>Visual State</div> <div>All Horizon Themes</div> </div> <div> <div>Normal</div> <div>background: var(--sapButton_Background);<br>border: solid 0.0625rem Var(--sapAIBorderColor);<br>color: var(--sapAITextColor);</div> </div> <div> <div>Hover</div> <div>background: color-mix(in srgb var(--sapAIContent_Hover_Color) var(--sapAIContent_Hover_Mix), var(–sapAIBrandColor));</div> </div> <div> <div>Active</div> <div>background: color-mix(in srgb var(--sapAIContent_Active_Color) var(--sapAIContent_Active_Mix), var(–sapAIBrandColor));</div> </div> <div> <div>Focused</div> <div>border: none;<br>outline: var(--sapContent_FocusStyle) var(--sapContent_FocusWidth) var(–sapAIContent_FocusColor);</div> </div> <div> <div>Disabled</div> <div>opacity: 0.4;</div> </div>

Tablet Specification

General Specification

Describes only deltas from the desktop specification.

<div> <div>UI Element</div> <div>All Horizon Themes</div> </div> <div> <div>Button</div> <div> <p><strong>Hit Area</strong><br>height: 2.75rem;</p> <p><strong>Button Visual</strong> height: 2.25rem;<br>padding: 0.625rem 0.75rem;<br>gap: 0.25rem;<br>border-radius: 0.375rem;</p> </div> </div>