<a href="/wiki/display/CPDesign/Data+Token">Data Token</a>
- Created by Milanov, Kalin, last modified by Kirichev, Alexander on Jan 25, 2024
Table of Contents
Overview
Data Tokens are UI elements created to present structured, and repeatable information in grouped lists. Tokens are specifically designed for interaction and drag-and-drop behavior. Typically tokens are placed in side panels and their content depicts metadata about a selected object.
FIORITECHP1-28568 - Getting issue details... STATUS
Look and Feel
<p><div> <div><strong>Morning Horizon</strong></div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/components/components/data-tokens-1/media1_1b1522357125eaabd2eaea4e982b21ac86e519fd0.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1b1522357125eaabd2eaea4e982b21ac86e519fd0.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1b1522357125eaabd2eaea4e982b21ac86e519fd0.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/data-tokens-1/media%5C_1b1522357125eaabd2eaea4e982b21ac86e519fd0.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/components/components/data-tokens-1/media_1b1522357125eaabd2eaea4e982b21ac86e519fd0.png?width=750&format=png&optimize=medium</a>" width="1600" height="732"> </picture> </div> </div> <div> <div><strong>Evening Horizon</strong></div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/components/components/data-tokens-1/media1_1eab11500f45c41d142bedcc47d80583a30889633.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1eab11500f45c41d142bedcc47d80583a30889633.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1eab11500f45c41d142bedcc47d80583a30889633.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/data-tokens-1/media%5C_1eab11500f45c41d142bedcc47d80583a30889633.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/components/components/data-tokens-1/media_1eab11500f45c41d142bedcc47d80583a30889633.png?width=750&format=png&optimize=medium</a>" width="1600" height="732"> </picture> </div> </div> <div> <div><strong>Horizon HCB</strong></div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/components/components/data-tokens-1/media1_13afd60059f504d117cabcce87addeaf579fdbf6c.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_13afd60059f504d117cabcce87addeaf579fdbf6c.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_13afd60059f504d117cabcce87addeaf579fdbf6c.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/data-tokens-1/media%5C_13afd60059f504d117cabcce87addeaf579fdbf6c.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/components/components/data-tokens-1/media_13afd60059f504d117cabcce87addeaf579fdbf6c.png?width=750&format=png&optimize=medium</a>" width="1600" height="732"> </picture> </div> </div> <div> <div><strong>Horizon HCW</strong></div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/components/components/data-tokens-1/media1_1eda533f738fd6b291507ebbc1e8d0b8a263b20d1.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1eda533f738fd6b291507ebbc1e8d0b8a263b20d1.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1eda533f738fd6b291507ebbc1e8d0b8a263b20d1.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/data-tokens-1/media%5C_1eda533f738fd6b291507ebbc1e8d0b8a263b20d1.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/components/components/data-tokens-1/media_1eda533f738fd6b291507ebbc1e8d0b8a263b20d1.png?width=750&format=png&optimize=medium</a>" width="1600" height="732"> </picture> </div> </div></p>
Anatomy
The anatomy of the Data Tokens is divided into three areas: Icons, Content, and Actions. Icons are placed at the beginning of the token and contain various icon indicators such as data type, expand and collapse, value state, color, avatar, primary key, etc. The content area in the middle contains vertically stacked text such as the token title, byline, line, etc. The actions area at the end is reserved for actions like buttons and switches.
<div> <div></div> <div>UI Element</div> <div>Description</div> </div> <div> <div><strong>A</strong></div> <div><strong>Icon Area</strong></div> <div>An empty horizontally stacking container or aggregation of icons or other identifiers for a token type, purpose, or interaction. Can host multiple icons or identifiers.</div> </div> <div> <div><strong>B</strong></div> <div><strong>Content Area</strong></div> <div>An empty vertically stacking container or aggregation of content. Can contain a title, text, and link. Can host multiple text-based UI elements.</div> </div> <div> <div><strong>C</strong></div> <div><strong>Actions Area</strong></div> <div>An empty horizontally stacking container or aggregation of actions. Typically can host an overflow toolbar.</div> </div>
Desktop Specification
General Specification
<div> <div>UI Element</div> <div>All Horizon Themes</div> </div> <div> <div><strong>Data Token</strong></div> <div> <p>min-height: 2rem;<br>padding: 0.1875rem 0.25rem 0.1875rem 0.5rem;<br>gap: 0.375rem;</p> <p>border: solid 0.0625rem;<br>border-radius: 0.25rem;</p> <p><strong>When Borderless</strong><br>border: none;</p> <p><strong>When Actions</strong> - on Hover, Selected, Selected-Hover, and Focused<br>Show actions aggregation. See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FNested%2BButton">Nested Button</a> (Nesed) for full specification</p> <p><strong>When Draggable</strong> - on Hover, Selected-Hover, and Focused<br>Show grip icon. If the token icon type is defined, replace the icon with a grip icon.<br>icon: sap-icon://vertical-grip<br>icon-color: var(--sapTextColor);</p> <p>When Expandable - how an expand collapse icon at the beginning position of the icon aggregation<br>expanded-icon: sap-icon://slim-arrow-down<br>collapsed-icon: sap-icon://slim-arrow-right<br>icon-color: var(--sapTextColor);</p> <p><strong>When Semantic</strong> - show semantic icon immediately after the Token Type (if present)</p> </div> </div>
Visual States
<div> <div>Value State</div> <div>All Horizon Themes</div> </div> <div> <div><strong>Normal</strong></div> <div>background-color: var(--sapList_Background);<br>border-color: var(--sapObjectHeader_BorderColor);<br>color: var(--sapTextColor);<br>icon-color: var(--sapContent_NonInteractiveIconColor);</div> </div> <div> <div><strong>Hover</strong></div> <div>background-color: var(–sapList_Hover_Background);</div> </div> <div> <div><strong>Read-Only</strong></div> <div>background-color: var(--Readonly/sapField_ReadOnly_Background);<br>border: none;<br>color: var(--sapContent_LabelColor);</div> </div> <div> <div><strong>Selected</strong></div> <div>background: var(--sapDataToken_SelectionBackground);<br>border-color: var(–sapList_SelectionBorderColor);</div> </div> <div> <div><strong>Selected Hover</strong></div> <div>background: var(--sapDataToken_Hover_SelectionBackground);<br>border-color: var(–sapList_SelectionBorderColor);</div> </div> <div> <div><strong>Focused</strong></div> <div>background-color: var(--sapList_Background);<br>border: none;<br>outline: var(--sapContent_FocusStyle) var(--sapContent_FocusWidth) var(--sapContent_FocusColor);</div> </div>
Icon Area
The icon area is an aggregation that can host a number of components. The list below details the most common use cases and defines their specifications.
<div> <div></div> <div>UI Element</div> <div>All Horizon Themes</div> </div> <div> <div><strong>A</strong></div> <div><strong>Icon Container</strong></div> <div>min-height: 1.625rem;<br>padding: 0.1875rem 0rem;<br>align-items: center;<br>gap: 0.375rem;</div> </div> <div> <div><strong>A1</strong></div> <div><strong>Token Type Identifier</strong></div> <div>width: 0.75rem;<br>height: 0.75rem;<br>color: color: var(--sapContent_LabelColor);</div> </div> <div> <div><strong>A2</strong></div> <div><strong>Expand / Collapse Indicator</strong></div> <div>width: 0.75rem;<br>height: 0.75rem;<br>color: var(--sapTextColor);</div> </div> <div> <div><strong>A3</strong></div> <div><strong>Secondary Indicator</strong></div> <div> <p><strong>Icon Container</strong><br>width: 0.875rem;<br>height: 0.875rem;<br>background-color: var(--sapDataToken_SecondaryIndicator)</p> <p><strong>Icon</strong><br>width: 0.4375rem;<br>height: 0.4375rem;<br>color: var(--sapContent_ContrastIconColor);</p> </div> </div> <div> <div><strong>A4</strong></div> <div><strong>Avatar</strong></div> <div> <p>width: 1.25rem;<br>height: 1.25rem;</p> <p><strong>Initials</strong><br>font-size: 0.625rem;</p> <p><strong>Icon</strong><br>width: 0.625rem;<br>height: 0.625rem;</p> </div> </div> <div> <div><strong>A5</strong></div> <div><strong>Color</strong></div> <div> <p>width: 0.8rem;<br>height: 0.75rem;<br>border-radius: 0.0625rem;</p> <p>background: #F0F; (application-defined)</p> </div> </div> <div> <div><strong>A6</strong></div> <div><strong>Semantic Indication</strong></div> <div> <p>See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2823064653">Message and Status Icons (Horizon)</a> for full specifications.</p> <p>width: 0.875rem;<br>height: 0.875rem;</p> </div> </div>
Content Area
The content area is an aggregation that can host text, labels, and links. The specification below describes the most common use cases.
<div> <div></div> <div>UI Element</div> <div>All Horizon Themes</div> </div> <div> <div><strong>B</strong></div> <div><strong>Content Container</strong></div> <div>width: 100%;<br>min-height: 1.625rem;<br>padding: 0.3125rem 0rem;<br>gap: 0.125rem;</div> </div> <div> <div><strong>B1</strong></div> <div><strong>Token Title</strong></div> <div> <p>overflow: hidden;<br>color: var(--sapTextColor);<br>text-overflow: ellipsis;</p> <p>font-family: var(--sapFontSemiboldDuplexFamily);<br>font-size: var(--sapFontSize);</p> <p>See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2698915836">Text (Horizon)</a> for full specifications.</p> </div> </div> <div> <div><strong>B2</strong></div> <div><strong>Byline</strong></div> <div> <p>overflow: hidden;<br>color: var(--sapContent_LabelColor);<br>text-overflow: ellipsis;</p> <p>font-family: var(--sapFontFamily);<br>font-size: var(--sapFontSmallSize);</p> <p>See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2698914064">Label (Horizon)</a> for full specifications.</p> </div> </div> <div> <div><strong>B3</strong></div> <div><strong>Link</strong></div> <div> <p>overflow: hidden;<br>color: var(--sapLinkColor);<br>text-overflow: ellipsis;</p> <p>font-family: var(--sapFontFamily);<br>font-size: var(--sapFontSmallSize);</p> <p>See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2698914103">Link (Horizon)</a> for full specifications.</p> </div> </div>
Actions Area
The actions area is an aggregation that can host horizontally stacked action triggers like a button or a switch. The table below describes the most common use cases.
<div> <div></div> <div>UI Element</div> <div>All Horizon Themes</div> </div> <div> <div><strong>C</strong></div> <div><strong>Actions Area</strong></div> <div>min-height: 1.625rem;<br>align-items: center;<br>gap: 0.375rem;</div> </div> <div> <div><strong>C1</strong></div> <div><strong>Actions Toolbar</strong></div> <div> <p>display: flex;<br>height: 1.625rem;<br>justify-content: flex-end;<br>align-items: center;<br>gap: 0.125rem;</p> <p><strong>Buttons</strong><br>See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FNested%2BButton">Nested Button</a> (Nested Button) for full specifications.</p> </div> </div> <div> <div><strong>C2</strong></div> <div><strong>Switch</strong></div> <div>See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2Fvisualcore%2FSwitch">Switch</a> for full specifications</div> </div>
Tablet Specification
<div> <div>UI Element</div> <div>All Horizon Themes</div> </div> <div> <div><strong>Data Token</strong></div> <div>min-height: 2rem;<br>padding: 0.25rem 0.25rem 0.25rem 0.5rem;<br>gap: 0.375rem;</div> </div>
Phone Specification
Identical to the Tablet Specification