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 |
|---|---|
| Content | |
| Title | Sets the title of the call out |
| Description | Sets the description of the callout. Accepts HTML |
| Call to action text | Sets the display text for the onCtaClick event handler |
| Appearance | |
| Callout type | The type of callout, options are Info, Success, Warning, or Danger |
| Title style | Set the style of the title of the component |
| Description style | Changes the style (font, size, etc.) of the callout's description text. Configure styles in the Typography settings |
| Call to action style | Changes the style (font, size, etc.) of the callout's call to action text. Configure styles in the Typography settings |
| Load animation | Toggle whether or not to have a loading animation |
| Background | Sets the background color of the component |
| Border | Sets the borders of the component |
| Border radius | Sets the border radius of the component |
| Layout | |
| Width | Controls the width of the component |
| Height | Controls the height of the component |
| Visible | Controls the visibility of the component, values are a boolean |
| Collapse when invisible | Controls what happens when the component is invisible. When true, other components shift to fill its space; when false, it leaves a blank space. This has no effect in edit mode.. |
| Interaction | |
| Dismissible | Controls whether the callout can be dismissed. When enabled, clicking the X on the callout will toggle its visibility to false |
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 |