Effective communication and clear information flow are key to ensuring a seamless user experience in the ever-evolving app development world. The Callout component for canvas and detail pages to address this. This feature is designed to give users a better understanding of important events or actions happening within the app, enhancing usability and improving overall user satisfaction.

Title and Icon

Specify a title that succinctly summarizes the information or event being conveyed.

Additionally, choose an icon that visually represents the nature or significance of the message, making it easily recognizable at a glance.


Convey important details or instructions related to the event or action being communicated.

You can use this field to provide additional context, guide users through specific tasks, or notify them about any changes or updates.


There are four distinct callout styles with different visual colors, allowing you to match the appearance of the Callout component with the significance or urgency of the message being conveyed.

  • Info: Provide general information or guidance in blue.

  • Warning: Send alerts in yellow to users about potential issues or actions that require attention.

  • Error: in red, indicating critical or failures that need immediate attention.

  • Success: confirming the completion of a task or action in green.

Hidden Option

Choose whether to hide the component from the view of the app users. This can be useful in cases where the callout is not relevant in some special cases or events or needs to be hidden for security reasons.


Name the component for use with the Typescript.


Last updated