Skip to main content


The Callout component is a versatile tool for displaying messages in four distinct styles: Info, Success, Warning, and Danger. It features a call to action text and provides functionality for both triggering the call to action and dismissing the callout.

To use it, integrate the component with your preferred style, include the call to action text, and implement event handlers for user interaction and dismissal. The Callout component is a valuable addition for conveying important messages while guiding users through specific actions when needed.

Example of a callout component.

Callout Properties

Component Properties

Callout TypeThe type of callout, options are Info, Success, Warning, or Danger
TitleThe title of the callout
DescriptionThe description of the callout. Accepts HTML
CTA TextThe call to action text displayed on the callout. When clicked, fires the On CTA Click event
Vertical AlignSets the vertical alignment relative to the container
DismissibleControls whether the callout can be dismissed. When enabled, clicking the X on the callout will toggle its visibility to false
Loading AnimationControls whether the callout should display a loading animation when a dependent API is running
VisibleControls the visibility of the component, values are a boolean

Reference Properties

Properties can be accessed from other frontend components and backend APIs by adding the name of the Callout component, and dot referencing the property. For a Callout named Callout1:

Callout1.calloutTypeReturns the callout's type as a string
Callout1.ctaTextReturns the callout's CTA text as a string
Callout1.descriptionReturns the callout's description as a string
Callout1.isDismissibleReturns the boolean value of the callout's dismissible state (True, if dismissible)
Callout1.isVisibleReturns the boolean value of the callout's visibility (True, if it is visible)
Callout1.titleReturns the callout's title as a string


The following events are triggered by user interactions with Callout components. Use event handlers to trigger actions in response to user events.

Table Reference PropertyDescription
onCtaClickIf the callout includes a CTA, this event fires when it is clicked
onDismissIf the callout is dismissible, this event fires when the callout is dismissed