<a href="/wiki/display/CPDesign/Info+Label">Info Label</a>
- Created by Bernath, Anna, last modified by Milanov, Kalin on Aug 29, 2023
Table of Contents
Overview
Info Label is a small non-interactive numeric or text-based control. Its primary use is to add user-defined characteristics to an object.
FIORITECHP1-27164 - Getting issue details... STATUS
Look and Feel
<p><div> <div>Morning Horizon</div> <div>Evening Horizon</div> <div>Horizon HC Black</div> <div>Horizon HC White</div> </div> <div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/components/components/info-label/media1_1a9d8877c27c54e916a7c27258adc15078aace089.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1a9d8877c27c54e916a7c27258adc15078aace089.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1a9d8877c27c54e916a7c27258adc15078aace089.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/info-label/media%5C_1a9d8877c27c54e916a7c27258adc15078aace089.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/components/components/info-label/media_1a9d8877c27c54e916a7c27258adc15078aace089.png?width=750&format=png&optimize=medium</a>" width="332" height="834"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/components/components/info-label/media1_18d155522676c9260cb87f1bc634a061b11de4b09.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_18d155522676c9260cb87f1bc634a061b11de4b09.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_18d155522676c9260cb87f1bc634a061b11de4b09.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/info-label/media%5C_18d155522676c9260cb87f1bc634a061b11de4b09.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/components/components/info-label/media_18d155522676c9260cb87f1bc634a061b11de4b09.png?width=750&format=png&optimize=medium</a>" width="330" height="834"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/components/components/info-label/media1_1ee87acaf5222c3229f43eeab6decfbd6cb178374.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1ee87acaf5222c3229f43eeab6decfbd6cb178374.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1ee87acaf5222c3229f43eeab6decfbd6cb178374.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/info-label/media%5C_1ee87acaf5222c3229f43eeab6decfbd6cb178374.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/components/components/info-label/media_1ee87acaf5222c3229f43eeab6decfbd6cb178374.png?width=750&format=png&optimize=medium</a>" width="330" height="834"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/components/components/info-label/media1_10ba829d6660dea3a529a88961935c80671290d5f.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_10ba829d6660dea3a529a88961935c80671290d5f.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_10ba829d6660dea3a529a88961935c80671290d5f.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/info-label/media%5C_10ba829d6660dea3a529a88961935c80671290d5f.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/components/components/info-label/media_10ba829d6660dea3a529a88961935c80671290d5f.png?width=750&format=png&optimize=medium</a>" width="332" height="834"> </picture> </div> </div></p>
Anatomy
<div> <div></div> <div>Element</div> <div>Description</div> </div> <div> <div>A</div> <div>Info Container</div> <div>The container that hosts the text of the info label.</div> </div> <div> <div>B</div> <div>Margins and Paddings</div> <div>The spacing between info label elements. These vary depending on the content.</div> </div> <div> <div>C</div> <div>Icon (Deprecated)</div> <div>The deprecated icon of the info label. (Do not use.)</div> </div> <div> <div>D</div> <div>Label or Number</div> <div>The text or number of the info label.</div> </div>
Specification
WARING BTP COLOR USAGE
The design of the Info Label control uses parameters defined in the BTP Reference Colors document.
These colors and parameters are specific to BTP and are used in TNT, VizFrame Charts, and Diagram Designs.
These colors are intentionally not themable. Do not use in other controls.
<div> <div></div> <div>Element</div> <div>Morning Horizon</div> <div>Evening Horizon</div> <div>HCB</div> <div>HCW</div> </div> <div> <div>A</div> <div>Info Container</div> <div> <p>height: 1.375rem;<br>width: auto;<br>border-radius: 0.25rem;</p> <p><strong>Display Mode</strong> height: 1rem;<br>width: auto;<br>border-radius: 0.1875rem;</p> </div> </div> <div> <div>Color Scheme</div> <div> <p><strong>Accent 1 - Mango</strong><br>background: var(--sapAvatar_1_Background);color: var(--sapAvatar_1_TextColor);</p> <p><strong>Accent 2 - Red</strong><br>background: var(--sapAvatar_2_Background);<br>color: var(--sapAvatar_2_TextColor);</p> <p><strong>Accent 3 - Raspberry</strong><br>background: var(--sapAvatar_3_Background);<br>color: var(--sapAvatar_3_TextColor);</p> <p><strong>Accent 4 - Pink</strong><br>background: var(--sapAvatar_4_Background);<br>color: var(--sapAvatar_4_TextColor);</p> <p><strong>Accent 5 - Indigo</strong><br>background: var(--sapAvatar_5_Background);<br>color: var(--sapAvatar_5_TextColor);</p> <p><strong>Accent 6 - Blue</strong><br>background: var(--sapAvatar_6_Background);<br>color: var(--sapAvatar_6_TextColor);</p> <p><strong>Accent 7 - Teal (Default)</strong><br>background: var(--sapAvatar_7_Background);<br>color: var(--sapAvatar_7_TextColor);</p> <p><strong>Accent 8 - Green</strong> background: var(--sapAvatar_8_Background);<br>color: var(--sapAvatar_8_TextColor);</p> <p><strong>Accent 9 - Cyan</strong><br>background: var(--sapAvatar_9_Background);<br>color: var(--sapAvatar_9_TextColor);</p> <p><strong>Accent 10 - Grey</strong><br>background: var(--sapAvatar_10_Background);<br>color: var(--sapAvatar_10_TextColor);</p> </div> <div> <p><strong>Accent 1 - Mango</strong><br>background: var(--btp-Mango1);color: var(--btp-Mango11);</p> <p><strong>Accent 2 - Red</strong><br>background: var(--btp-Red1);<br>color: var(--btp-Red11);</p> <p><strong>Accent 3 - Raspberry</strong><br>background: var(--btp-Raspberry1);<br>color: var(--btp-Raspberry11);</p> <p><strong>Accent 4 - Pink</strong><br>background: var(--btp-Pink1);<br>color: var(--btp-Pink11);</p> <p><strong>Accent 5 - Indigo</strong><br>background: var(--btp-Indigo1);<br>color: var(--btp-Indigo11);</p> <p><strong>Accent 6 - Blue</strong><br>background: var(--btp-Blue1);<br>color: var(--btp-Blue11);</p> <p><strong>Accent 7 - Teal (Default)</strong><br>background: var(--btp-Teal1);<br>color: var(--btp-Teal11);</p> <p><strong>Accent 8 - Green</strong> background: var(--btp-Green1);<br>color: var(--btp-Green11);</p> <p><strong>Accent 9 - Purple</strong><br>background: var(--btp-Purple1);<br>color: var(--btp-Purple11);</p> <p><strong>Accent 10 - Grey</strong><br>background: var(--btp-Grey1);<br>color: var(--btp-Grey11);</p> </div> </div> <div> <div>B1</div> <div>Padding</div> <div> <p>padding: 0.375rem;</p> <p><strong>Display Mode</strong> padding: 0.25rem;</p> </div> </div> <div> <div>B2</div> <div>Icon Margin</div> <div> <p>margin-right: 0.25rem;</p> <p><strong>Display Mode</strong> margin-right: 0.125rem;</p> </div> </div> <div> <div>C</div> <div>Icon</div> <div> <p>icon: 0.75rem;</p> <p><strong>Display Mode</strong> icon: 0.625rem;</p> </div> </div> <div> <div>D</div> <div>Label</div> <div> <p>font-size: var(--sapFontSize);font-family: var(--sapFontSemiboldDuplexFamily);</p> <p><strong>Display Mode</strong> font-size: var(--sapFontSmallSize);<br>font-family: var(--sapFontSemiboldDuplexFamily);</p> </div> </div>