Informer is a pattern used to visually indicate hints within the interface. It is useful when there is limited space to add, for example, a hint link alongside a component.
The informer consists of the following elements:
- Tooltip containing the hint message (appears upon hovering over the icon)
Avoid using the
Info icon with the
h1 title. This title typically pertains to hero blocks and similar elements. Adding hints to the main page title might seem unusual.
|Font size||Icon size||Usage|
|36px (||L||Use exclusively for the largest titles and controls.|
|Smaller than 24px (||M||Suitable for text sizes smaller than 24px.|
|Hover||The icon color doesn't change on hover. Only cursor changes to |
|Icon size||Target zone size||Appearance example|
|L||24px * 24px|
|M||16px * 16px|
For comprehensive details, refer to the Tooltip.
Usage in UX/UI
Info icon contains supplementary information about a control within a group of controls (for example, filters), pay attention to margins.
When controls are accompanied by text labels, position the
Info icon adjacent to the labels.