Callout
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.
Callout Properties
Component Properties
| Property | Description |
|---|---|
| Callout Type | The type of callout, options are Info, Success, Warning, or Danger |
| Title | The title of the callout |
| Description | The description of the callout. Accepts HTML |
| Description Text Style | Changes the style (font, size, etc.) of the callout's description text. Configure styles in the Typography settings |
| Description Text Color | Changes the color of the callout's description text |
| CTA Text | The call to action text displayed on the callout. When clicked, fires the On CTA Click event |
| CTA Text Style | Changes the style (font, size, etc.) of the callout's call to action text. Configure styles in the Typography settings |
| CTA Color | Changes the color of the call to action text |
| Vertical Align | Sets the vertical alignment relative to the container |
| Dismissible | Controls whether the callout can be dismissed. When enabled, clicking the X on the callout will toggle its visibility to false |
| Loading Animation | Controls whether the callout should display a loading animation when a dependent API is running |
| Visible | Controls 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:
| Property | Description |
|---|---|
Callout1.calloutType | Returns the callout's type as a string |
Callout1.ctaText | Returns the callout's CTA text as a string |
Callout1.description | Returns the callout's description as a string |
Callout1.isDismissible | Returns the boolean value of the callout's dismissible state (True, if dismissible) |
Callout1.isVisible | Returns the boolean value of the callout's visibility (True, if it is visible) |
Callout1.title | Returns the callout's title as a string |
Events
The following events are triggered by user interactions with Callout components. Use event handlers to trigger actions in response to user events.
| Table Reference Property | Description |
|---|---|
| onCtaClick | If the callout includes a CTA, this event fires when it is clicked |
| onDismiss | If the callout is dismissible, this event fires when the callout is dismissed |