Help label
Used to carry more functional descriptions
Overview
Usage scenario
In general scenarios, when additional explanation is needed, an info icon is used, while in some special scenarios, an anti-line and hover color change are used (some scenarios are displayed in the examples).
Specification
Ant Line
Hide Small Balances
Hide Small Balances
Ant Line
info:
info:
info:
Ant line:
Ant line:
Component composition
Info icon
The icon style is 【i】, providing 6 preset sizes for general scenarios.
Ant line
Adhering to the bottom of the element, aligned with the line height of the text, used in special scenarios.
1
2
Hide Small Balances
Ant line:
info:
Ant Line
Interaction instructions
Hide Small Balances
Typically paired with Tooltips or Popover to expand functionality annotations.
Typically paired with Tooltips or Popover to expand functionality annotations.
Ant line:
info:
Info icon
The pointer changes to a finger, and the info icon changes color (typically primary-blue → primary-blue-hover / icon-secondary & icon-tertiary → icon-primary).
Ant line
The pointer changes to a finger, and the text changes color (generally primary-blue → primary-blue-hover / icon-secondary & icon-tertiary → icon-primary)
Ant Line
Style description
Note example
Help tips, Ant line, info, assistance |