Callout

Use callouts to highlight important information or actions. They help draw attention to key content and guide users effectively.

When to use

Callouts are useful for:

• highlighting critical or time-sensitive information
• alerting users to warnings or potential issues
• prompting users to take specific actions.

Use them sparingly to avoid overwhelming users. Too many callouts can dilute their impact and reduce usability.

Style and customisation

Callouts can be styled with different colours, sizes and icons to suit their context. Use visual elements consistently to reflect the nature of the message, such as:

• green for success messages
• blue for general information
• orange for warnings
• red for urgent alerts.

You can also use outlines and surface styles to improve visibility and maintain a clear visual hierarchy.