InformationOverlay

The InformationOverlay provides additional information via an overlay, the position of which can be adjusted. According to the type of information, the variant can be set. The trigger consists of an icon and an optional text. By default, the variant is info and the overlay is positioned on the bottom.

OverviewPropertiesUsage

Read more about the InformationOverlay best practices on the guided interaction page.

Variants

InformationOverlays come in five variants. Each of them has a different semantic meaning.

Neutral

• Use the neutral variant for general information that shouldn't stand out—for example, further context about a feature that may not be immediately obvious to the user.

Primary

• Use the primary variant to convey important messages and highlight crucial actions that require attention. For example, when offering essential tips, instructions, or guidance for interacting with a particular feature.
• Use the primary variant sparingly, ideally once per view or context at most.

Success

• Use the success variant to indicate the successful completion of an action or operation.

Warning

• Use the warning variant when conveying cautionary information or potential issues users may want to know about.

Critical

• Use the critical variant to indicate that the information requires immediate attention. For example, when a wrong configuration impacts a system. Always pair it with a label that complements the nature of the message. For instance, 2 clusters failing.

Content guidelines

General

• Titles are optional. If you use a title, keep it short, and don't use a period (titles don't get periods). Use sentence case, and don't repeat the same message in the body text.
• In the body text, end sentences with a period.

Message content

• Try to convey your message simply in one or two sentences. Give essential details, but don't overwhelm users with too much information.
• Avoid alarmist language that could cause needless worry or panic when using warning and critical variants. Clearly state the situation and give actionable next steps.
• Learn more about supporting users with guided interaction.