General components

This article describes components in Components Library > General.

Button

The Button component is a fundamental UI element that triggers actions or events when clicked. In the App Designer, select a Button on the canvas to configure it through four tab pages in the Settings panel: Props, Styles, Events, and Advanced.

note

The form's Submit button shares the similar configuration as the Button, with an additional Validate toggle. See Submit button.

Props

The Props tab contains the main visual and behavioural properties of the Button.

If a property displays the Variable Binding icon , that means it supports variable binding.

Property	UI Control	Default	Description
Icon	Icon selector	-	Sets an icon for the button. Click the selector to browse and choose an icon from the icon library. Click the clear (X) button to remove the selected icon.
Icon position	Radio group (Left | Right)	-	Controls the position of the icon relative to the button text.
Theme	Radio group (Ghost | Normal | Light | Dark)	-	Sets the visual theme of the button. Ghost creates a transparent outline style. Light and Dark are ghost variants for different backgrounds.
Content	i18n setter	cancel	Sets the text displayed on the button. Supports internationalisation.
Button type	Radio group (Primary | Secondary | Normal)	Primary	Determines the button's visual style and hierarchy. Primary for main call-to-action, Secondary for supporting actions, Normal for standard operations.
Button size	Radio group (Small | Medium | Large)	Medium	Controls the overall size of the button.
Icon size	Dropdown (XXS | XS | Small | Medium | Large | XL | XXL | XXXL)	Small	Controls the size of the icon displayed in the button.
Loading	Toggle switch	Off	Shows a loading spinner and disables user interaction while an operation is in progress.
Text	Toggle switch	Off	Renders the button as a text-only button with no border or background.
Warning	Toggle switch	Off	Applies warning styling (typically red) to indicate a destructive or cautious action.
Disabled	Toggle switch	Off	Controls whether the button is in a disabled state, preventing user interaction and indicating that the action is not currently available.

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. When the button is inside a Form.Item, the name is inherited from the parent. 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 Button without writing boilerplate code.

Binding an event

1. Click "Component native event" to select from the button's supported events:

   • onClick — Triggered when the button is clicked
   • onMouseUp — Triggered when the mouse button is released over the button

2. The Event Binding window opens, allowing you to select an event and apply parameter settings.

3. 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.

Event Binding window

Click the gear icon on an existing event to open the Event Binding window. This window contains:

• Select event — A left panel with two tabs:

  • Built-in function — Built-in event handlers provided by the platform
  • Event — A searchable list of all available event handlers in the current page, including custom ones. Click New Event at the top to create a new handler. Select an existing handler to bind it to this event.

• Event name — A text input displaying the name of the selected handler. You can rename it here.

• Advanced params settings — A toggle switch (default: Disable). The extended parameters are appended as a separate input parameter in JSON format after the original transparent transmission parameters, such as: onClick(event,extParams). When enabled, a JSON code editor appears where you can define the extra parameters.

• Click Confirm to save the binding, or Cancel to discard changes.

Handler signatures

For a standard Button, the onClick handler receives the click event:

onClick(event) {
  // Handle button click
}

The onMouseUp handler receives the mouse event:

onMouseUp(event) {
  // Handle mouse up
}

Advanced

For more information, refer to Advanced.

Accessibility

The Button component follows accessibility best practices:

• Keyboard Navigation: Buttons are focusable and respond to Space and Enter keys
• Disabled State: Disabled buttons are not focusable and have appropriate ARIA attributes
• Loading State: Loading state includes appropriate ARIA attributes for screen readers
• Semantic HTML: Uses proper HTML button elements or anchor tags based on purpose

Best practices

1. Use Appropriate Button Types

   • Primary — Main call-to-action on a page (use sparingly, typically one per section)
   • Secondary — Secondary actions that support the primary action
   • Normal — Tertiary actions or less important operations

2. Button Text Guidelines

   • Use clear, action-oriented text (e.g., "Save", "Delete", "Download")
   • Keep text concise (2-4 words is ideal)
   • Avoid vague labels like "Click Here"

3. Loading States

   • Always enable the Loading toggle (or use the loading prop) during asynchronous operations
   • This disables user interaction while processing to prevent duplicate submissions

4. Icon Usage

   • Use icons to enhance understanding, not replace text
   • Ensure icon meaning is universally understood
   • Position icons consistently (typically left-aligned)

5. Warning Buttons

   • Reserve the Warning toggle for destructive actions (delete, remove, cancel)
   • Consider adding a confirmation dialog for critical actions

Menu Button

The Menu Button component is a button that reveals a dropdown menu when triggered. It combines a labelled button with a list of selectable menu items, supporting single or multiple selection modes and configurable trigger methods. In the App Designer, select a Menu Button 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 Menu Button.

If a property displays the Variable Binding icon , that means it supports variable binding.

Property	UI Control	Default	Description
Label	Switch Setter (i18n setter / Variable input)	Label	Sets the label text displayed on the button. Supports internationalisation.
Has arrow	Toggle switch	On	Controls the visibility of the dropdown arrow on the button.
Icon	Icon selector	-	Sets an icon displayed on the button. Click the selector to browse and choose an icon from the icon library.
Auto width	Toggle switch	On	When enabled, the width of the dropdown menu matches the width of the button.
Auto open	Toggle switch	Off	When enabled, the dropdown menu is shown by default without requiring a user interaction.
Trigger type	Dropdown (Click | Hover)	Click	Specifies the interaction method that opens the dropdown menu.
Default selected keys	Switch Setter (Array setter / Expression input)	[]	Sets the initially selected menu item keys for uncontrolled usage. Click "Add an item +" to add a text field for each key.
Selected keys	Switch Setter (Array setter / Expression input)	-	Sets the currently selected menu item keys for controlled usage. Click "Add an item +" to add a text field for each key.
Select mode	Dropdown (Default | Single | Multiple)	-	Controls whether users can select one or multiple menu items.
Menu item	Switch Setter (Array setter / Expression input)	-	Defines the list of items in the dropdown menu. See Menu item configuration.
Type	Radio group (Normal | Text | Ghost)	Normal	Specifies the overall visual style of the button. Normal applies the standard button appearance. Text renders the button without a border or background. Ghost applies a transparent outline style.
Ghost	Radio group (Light | Dark)	Light	Sets the ghost variant when Type is set to Ghost. Light is suitable for use on dark backgrounds. Dark is suitable for use on light backgrounds. Only visible when Type is Ghost.
Button type	Radio group (Normal | Primary | Secondary)	Normal	Sets the button's visual hierarchy when Type is not Ghost. Primary for main call-to-action. Secondary for supporting actions. Normal for standard operations. Only visible when Type is not Ghost.
Button size	Radio group (Small | Medium | Large)	Medium	Controls the overall size of the button.

Menu item configuration

The Menu item array editor lists the items in the dropdown menu. Click "Add an item +" to add a new menu item. Each item displays a Label text field in the list. Click the edit (pencil) icon to open the item editor, click the delete (trash) icon to remove an item, or use the grip icon to reorder items.

The item editor provides the following properties:

Property	UI Control	Default	Description
Label	i18n setter	Label Item	Sets the display text of the menu item. Supports internationalisation.
Key	i18n setter	Auto-generated	Uniquely identifies the menu item. Auto-generated as a random number if not specified. Supports internationalisation.
Disabled	Toggle switch	Off	Controls whether the menu item is in a disabled state, preventing user interaction.

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 Menu Button without writing boilerplate code.

Binding an event

1. Click "Component native event" to select from the Menu Button's supported events:

   • onVisibleChange — Triggered when the dropdown menu's visibility changes
   • onItemClick — Triggered when a menu item is clicked
   • onSelect — Triggered when a menu item is selected

2. The Event Binding window opens, allowing you to select an event and apply parameter settings.

3. 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 visibility state and the trigger source:

onVisibleChange(visible, type) {
  // visible: true when the dropdown is opening, false when closing
  // type: 'menuSelect' | 'fromTrigger' | 'docClick'
}

The onItemClick handler receives the key of the clicked menu item:

onItemClick(itemKey) {
  // Handle menu item click
}

The onSelect handler receives the selected item's key and properties:

onSelect(itemKey, item, itemProps) {
  // Handle menu item selection
}

Advanced

For more information, refer to Advanced.

Button Group

The Button Group component groups multiple Button components into a visually joined unit with a uniform size. It accepts only Button components as children and applies a shared size setting across all of them. In the App Designer, select a Button Group 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 sizing property of the Button Group.

If a property displays the Variable Binding icon , that means it supports variable binding.

Property	UI Control	Default	Description
Button size	Radio group (Small | Medium | Large)	-	Uniformly sets the size of all Button components within the group.

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 Button Group without writing boilerplate code.

Binding an event

1. Click "Component native event" to select from the Button Group's supported events:

   • onClick — Triggered when any button within the group is clicked

2. The Event Binding window opens, allowing you to select an event and apply parameter settings.

3. 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(event) {
  // Handle button group click
}

Advanced

For more information, refer to Advanced.

Divider

The Divider component renders a horizontal or vertical line that visually separates content sections. It supports optional label text, a dashed line style, and configurable label alignment. In the App Designer, select a Divider on the canvas to configure it through three tab pages in the Settings panel: Props, Styles, and Advanced.

Props

The Props tab contains the visual and structural properties of the Divider.

If a property displays the Variable Binding icon , that means it supports variable binding.

Property	UI Control	Default	Description
Label	i18n setter	Delimiter	Sets the label text displayed on the divider line. Only visible when Direction is set to Horizontal. Supports internationalisation.
Dashed	Toggle switch	Off	When enabled, the divider line is rendered as a dashed line instead of a solid line.
Direction	Radio group (Horizontal | Vertical)	Horizontal	Specifies the orientation of the divider line.
Alignment	Radio group (Left | Right | Center)	Center	Controls the position of the label text along the divider line. Only visible when Direction is set to Horizontal.

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.

Advanced

For more information, refer to Advanced.

Icon

The Icon component displays a single graphical icon from the icon library. It supports configurable size and can respond to click events. In the App Designer, select an Icon 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 properties of the Icon.

If a property displays the Variable Binding icon , that means it supports variable binding.

Property	UI Control	Default	Description
Icon	Icon selector	smile	Sets the icon to display. Click the selector to browse and choose an icon from the icon library.
Icon size	Dropdown (XXS | XS | Small | Medium | Large | XL | XXL | XXXL | Inherit)	-	Controls the size of the icon. Inherit uses the font size of the parent element.

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 Icon without writing boilerplate code.

Binding an event

1. Click "Component native event" to select from the Icon's supported events:

   • onClick — Triggered when the icon is clicked

2. The Event Binding window opens, allowing you to select an event and apply parameter settings.

3. 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(event) {
  // Handle icon click
}

Advanced

For more information, refer to Advanced.

Link

The Link component renders a hyperlink with configurable display text, URL, and target window behaviour. It supports two configuration modes: Simple for direct URL input, and Advanced for behaviour-based navigation configuration. In the App Designer, select a Link 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 text and navigation properties of the Link.

If a property displays the Variable Binding icon , that means it supports variable binding.

Property	UI Control	Default	Description
Text	i18n setter	This is a hyperlink	Sets the display text of the link. Supports internationalisation.
Link type	Radio group (Advanced | Simple)	Simple	Specifies the configuration mode. Simple exposes a direct URL input and target window selector. Advanced exposes a behaviour-based configuration editor for complex navigation scenarios. Only visible when the platform supports advanced behaviour configuration.

Simple settings (conditional)

When Link type is set to Simple, the following properties are available:

Property	UI Control	Default	Description
Target	Radio group (Same window | New window)	New window	Specifies whether the link opens in the same browser tab or a new tab.
Link	Text input	https://fusion.design	Sets the URL the link navigates to when clicked.

Advanced settings (conditional)

When Link type is set to Advanced, an Advanced settings panel appears with the following properties:

Property	UI Control	Default	Description
Event	Dropdown (onClick)	onClick	Sets the event that triggers the navigation action.
Type	Radio group (Dialog | Link)	Link	Sets the action type. Link navigates to a URL or internal page. Dialog opens a dialog.
Target	Radio group (Same window | New window)	Same window	Specifies whether the destination opens in the same browser tab or a new tab.
Target type	Radio group (Internal page | URL)	Internal page	Specifies whether the destination is an internal app page or an external URL.
Destination	Text input	-	Sets the destination URL or internal page path.

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 Link without writing boilerplate code.

Binding an event

1. Click "Component native event" to select from the Link's supported events:

   • onClick — Triggered when the link is clicked

2. The Event Binding window opens, allowing you to select an event and apply parameter settings.

3. 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(event) {
  // Handle link click
}

Advanced

For more information, refer to Advanced.

Last updated on 20 May 2026