Help label
Used to carry more functional descriptions
Component composition
Info icon
The icon style is 【i】, and the surface icon size is set according to the requirements.
Ant line
Adhering to the bottom of the element, aligned with the line height of the text, used in special scenarios.
1
2
MTL
Ant line:
info icon:
Ant Line
Interaction instructions
Click
Typically used in conjunction with Tooltips, Popovers, and dialog boxes, it describes functional annotations and supports more types of text.
info:
Ant line:
Typically paired with Tooltips, Popovers, or dialog boxes to expand functionality annotations.
Typically paired with Tooltips, Popovers, or dialog boxes to expand functionality annotations.
MTL
Ant Line
Style description
UI style
Default 14px in general scenarios
The color of the ant line is divider-antline, and its length follows the text with no spacing between them.
The current surface icon on the trading page needs to be replaced with a linear icon. The scenarios for using the ant line on the trading page remain unchanged; only the style of the ant line will be updated.
When there is a lot of copy needing annotations on the contract notification page, use the Ant line uniformly.
Applicable in special scenarios for ant lines (for scenarios that cannot be determined, please discuss with DS colleagues)
Different colors can be selected based on needs, but generally only the following four types of colors are in use: icon-secondary, icon-tertiary, primary, text-white.
It is recommended to use the tertiary icon color: icon-tertiary.
The spacing of info with other elements/controls follows the spacing specification>
Follow the spacing specifications
MTL
Note example
Help Tips
Description Tag
Auxiliary Information
Help Copy
Tip Tag