Information feedback components
This article describes components in Components Library > Information Feedback.
Message
The Message component displays inline feedback messages with support for different types, shapes, and sizes. It can be used for success alerts, warnings, errors, notices, help text, and loading indicators. In the App Designer, select a Message on the canvas to configure it through four tab pages in the Settings panel: Props, Styles, Events, and Advanced.
Props
The Props tab contains the visual and behavioural properties of the Message.
If a property displays the Variable Binding icon 
, that means it supports variable binding.
| Property | UI Control | Default | Description |
|---|---|---|---|
| Title | i18n setter | Alert | Sets the title text of the message. Supports internationalisation. |
| Type | Dropdown (Success | Warning | Error | Notice | Help | Loading) | Warning | Specifies the feedback style of the message. |
| Shape | Radio group (Inline | Addon | Toast) | Inline | Determines the appearance style of the message. |
| Size | Radio group (Medium | Large) | Medium | Sets the size of the message. |
| Content | Switch Setter (i18n setter / Slot setter / Variable input) | This item already has the label "travel", you can add a new label. | Sets the content or text displayed in the message body. Supports internationalisation. |
| Visible | Toggle switch | On | Controls whether the message is currently displayed. |
| Icon | Icon setter | - | Sets a custom icon for the message. |
| Closeable | Toggle switch | Off | Controls whether a close button is displayed. |
| Animate loading | Toggle switch | On | Controls the loading of the widget. |
Advanced (Props sub-section)
Within the Props tab, an Advanced collapsible section provides:
| Property | UI Control | Default | Description |
|---|---|---|---|
| ID | Text input | Auto-generated | Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually. |
| Name | Text input | Auto-generated | HTML name attribute for form identification. Auto-generated from the component title. You can override this value manually. |
Styles
For more information, refer to Styles.
Events
The Events tab allows you to bind event handlers to the Message without writing boilerplate code.
Binding an event
-
Click "Component native event" to select from the Message's supported events:
onClose— Triggered when the close button is clickedafterClose— Triggered after the close animation completes
-
The Event Binding window opens, allowing you to select an event and apply parameter settings.
-
After selecting an event, it appears in the Existing event table.
You can click the gear icon to edit the action, or click the trash bin icon to delete the binding.
Handler signatures
The onClose handler is triggered when the close button is clicked:
onClose() {
// called when the user clicks the close button
}
The afterClose handler is triggered after the close animation completes:
afterClose() {
// called after the closing animation has finished
}
Advanced
For more information, refer to Advanced.
Balloon
The Balloon component displays a floating popover panel that can be triggered by hover or click. It supports configurable placement, type, and trigger behaviour, and can contain arbitrary content as a container component. In the App Designer, select a Balloon on the canvas to configure it through four tab pages in the Settings panel: Props, Styles, Events, and Advanced.
Props
The Props tab contains the visual and behavioural properties of the Balloon.
If a property displays the Variable Binding icon , that means it supports variable binding.
| Property | UI Control | Default | Description |
|---|---|---|---|
| Popup container | Switch Setter (String setter / Function Binding / Variable input) | - | Specifies the parent node for floating layer rendering. Accepts a string node ID or a function returning the target node. |
| Placement | Dropdown (Top | Right | Bottom | Left | Top-left | Top-right | Bottom-left | Bottom-right | Left-top | Left-bottom | Right-top | Right-bottom) | Bottom | Specifies the position of the popover relative to its trigger element. |
| Designer visible | Toggle switch | On | Shows the popover in designer view. This setting does not affect behaviour in preview mode. |
| Type | Radio group (Normal | Primary) | Normal | Specifies the style type of the popover. |
| Trigger type | Radio group (Hover | Click) | Hover | Determines whether the popover is shown on hover or on click. |
| Delay (ms) | Number input | - | Adds a delay in milliseconds before displaying the popover. Visible only when Trigger type is set to Hover. |
| Auto open | Toggle switch | On | Sets the default visibility state of the popover when the component is initially rendered. |
| Closeable | Toggle switch | On | Controls whether a close button is displayed on the popover. |
| Auto focus | Toggle switch | On | Automatically places input focus on the first internal element when the popover appears. |
| Follow scrolling | Toggle switch | Off | Determines whether the popover moves with the page scrolling position. |
Advanced (Props sub-section)
Within the Props tab, an Advanced collapsible section provides:
| Property | UI Control | Default | Description |
|---|---|---|---|
| ID | Text input | Auto-generated | Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually. |
| Name | Text input | Auto-generated | HTML name attribute for form identification. Auto-generated from the component title. You can override this value manually. |
Styles
For more information, refer to Styles.
Events
The Events tab allows you to bind event handlers to the Balloon without writing boilerplate code.
Binding an event
-
Click "Component native event" to select from the Balloon's supported events:
onVisibleChange— Triggered when the popover visibility changesonClick— Triggered when the popover is clickedonClose— Triggered when the close button is clickedafterClose— Triggered after the close animation completes
-
The Event Binding window opens, allowing you to select an event and apply parameter settings.
-
After selecting an event, it appears in the Existing event table.
You can click the gear icon to edit the action, or click the trash bin icon to delete the binding.
Handler signatures
The onVisibleChange handler receives the new visibility state:
onVisibleChange(visible) {
// visible: true when the popover opens, false when it closes
}
The onClick handler receives the click event:
onClick(e) {
// e: the native click event object
}
The onClose handler is triggered when the close button is clicked:
onClose() {
// called when the user clicks the close button
}
The afterClose handler is triggered after the close animation completes:
afterClose() {
// called after the closing animation has finished
}
Advanced
For more information, refer to Advanced.
Loading
The Loading component displays a loading animation that can overlay content or be shown inline. It supports configurable size, color, and label text, and can operate in full-screen mode. In the App Designer, select a Loading on the canvas to configure it through four tab pages in the Settings panel: Props, Styles, Events, and Advanced.
Props
The Props tab contains the visual and behavioural properties of the Loading.
If a property displays the Variable Binding icon , that means it supports variable binding.
| Property | UI Control | Default | Description |
|---|---|---|---|
| Label | i18n setter | - | Sets the text label displayed alongside the loading animation. Supports internationalisation. |
| Label alignment | Radio group (Right | Bottom) | Bottom | Specifies the position of the label text relative to the loading animation. |
| Visible | Toggle switch | On | Controls whether the loading animation is displayed. |
| Size | Radio group (Large | Medium) | Large | Sets the size of the loading animation. |
| Color | Color setter | red | Specifies the color of the loading animation. |
| Full screen | Toggle switch | On | When enabled, the loading overlay covers the entire screen. |
| Inline | Toggle switch | On | Specifies whether the loading element is displayed inline. |
Advanced (Props sub-section)
Within the Props tab, an Advanced collapsible section provides:
| Property | UI Control | Default | Description |
|---|---|---|---|
| ID | Text input | Auto-generated | Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually. |
| Name | Text input | Auto-generated | HTML name attribute for form identification. Auto-generated from the component title. You can override this value manually. |
Styles
For more information, refer to Styles.
Events
The Events tab allows you to bind event handlers to the Loading without writing boilerplate code.
Binding an event
-
Click "Component native event" to select from the Loading's supported events:
onVisibleChange— Triggered when the loading visibility changes
-
The Event Binding window opens, allowing you to select an event and apply parameter settings.
-
After selecting an event, it appears in the Existing event table.
You can click the gear icon to edit the action, or click the trash bin icon to delete the binding.
Handler signatures
The onVisibleChange handler receives the new visibility state:
onVisibleChange(visible) {
// visible: true when loading appears, false when it hides
}
Advanced
For more information, refer to Advanced.
Progress
The Progress component displays a progress indicator in either line or circle form. It supports configurable percentage, state, color, and optional custom text rendering. In the App Designer, select a Progress on the canvas to configure it through four tab pages in the Settings panel: Props, Styles, Events, and Advanced.
Props
The Props tab contains the visual and behavioural properties of the Progress.
If a property displays the Variable Binding icon , that means it supports variable binding.
| Property | UI Control | Default | Description |
|---|---|---|---|
| Shape | Radio group (Circle | Line) | Line | Determines the visual shape of the progress indicator. |
| Size | Radio group (Small | Medium | Large) | Medium | Sets the size of the progress indicator. |
| Percentage | Number input | 30 | Specifies the current completion percentage (0–100). |
| State | Radio group (Normal | Success | Error) | Normal | Determines the progress state. Display priority is: Color > Color change > State. Visible only when Color change is Off. |
| Color change | Toggle switch | Off | When enabled, transitions the progress bar through colors as the percentage increases. Display priority is: Color > Color change > State. |
| Show border | Toggle switch | Off | When enabled, displays a border around the progress bar. Applicable to line progress only. |
| Text render | Function Binding | - | Specifies a custom function for rendering the progress label text. |
| Color | Color setter | - | Sets the color of the progress bar. Display priority is: Color > Color change > State. |
| Background color | Color setter | - | Sets the background color of the progress component. |
Text render
The Text render property accepts a function with the following signature:
textRender(percent) {
if (percent === 100) {
return <window.Next.Icon type="select" size="l" />;
}
return percent.toFixed(2) + "%";
}
Advanced (Props sub-section)
Within the Props tab, an Advanced collapsible section provides:
| Property | UI Control | Default | Description |
|---|---|---|---|
| ID | Text input | Auto-generated | Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually. |
| Name | Text input | Auto-generated | HTML name attribute for form identification. Auto-generated from the component title. You can override this value manually. |
Styles
For more information, refer to Styles.
Events
The Events tab allows you to bind event handlers to the Progress without writing boilerplate code.
Binding an event
-
Click "Component native event" to select from the Progress's supported events:
onClick— Triggered when the progress component is clicked
-
The Event Binding window opens, allowing you to select an event and apply parameter settings.
-
After selecting an event, it appears in the Existing event table.
You can click the gear icon to edit the action, or click the trash bin icon to delete the binding.
Handler signatures
The onClick handler receives the click event:
onClick(e) {
// e: the native click event object
}
Advanced
For more information, refer to Advanced.
Last updated on 20 May 2026