Info Button
The lens-info-button component displays a tooltip-style popup that provides users with helpful information or guidance. The popup is toggled by clicking the button.
This component is commonly used across various other components in Lens.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
message | string or string[] | "" | Text to display inside the tooltip. If an array is passed, each string will be rendered on a new line. |
buttonSize | number | 16 | Sets width and height of the button in px. |
alignDialogue | "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right" | "bottom-center" | Controls where the tooltip appears relative to the button. |
dialogueMaxWidth | string | "300px" | Maximum width of the tooltip container. |
inSearchBar | boolean | false | Applies special styling when used inside a search bar (e.g., white icon with orange hover). |
Usage
Here’s a basic example of how to use the <lens-info-button> component:
<lens-info-button message="This will inform the user about the app!">
</lens-info-button>
Or with multiple lines:
<lens-info-button
message='["Line one", "Line two", "Line three"]'
buttonSize="{20}"
alignDialogue="top-right"
dialogueMaxWidth="250px"
>
</lens-info-button>
Styling
| Part name | Description |
|---|---|
lens-info-button | Styles the button container. |
lens-info-button-icon | Default icon styling. |
lens-info-button-icon-in-search-bar | Styling override when inSearchBar is true. |
lens-info-button-dialogue | Tooltip wrapper. |
lens-info-button-dialogue-message | Individual message lines. |
lens-info-button-dialogue-align-center | Tooltip center alignment. |
lens-info-button-dialogue-align-left | Tooltip left alignment. |
lens-info-button-dialogue-align-right | Tooltip right alignment. |
Example
lens-info-button::part(lens-info-button-icon) {
color: var(--primary-color);
}