Button

Properties

General

Property	Type	Description
Display name	text	Text value for display name

Visual

Property	Type	Description
Title	i18n text	Button text displayed on the button. Supports interpolation with context data using {{property}} syntax. (Supports interpolation)
Size	single select	Select option for size Allowed values: Medium, Large, Extra large.
Type	single select	Select option for type Allowed values: Primary, Secondary, Ghost.
Tooltip	boolean	Enable or disable show tooltip
Tooltip text	i18n text	Tooltip text that appears when hovering over the button. Supports interpolation with context data using {{property}} syntax. (Supports interpolation)
Placement	single select	Select option for tooltip placement (See availableBSPositionItems)
Tooltip delay	text	Text value for tooltip delay
Left icon	icon picker	Select icon for icon left
Right icon	icon picker	Select icon for icon right
Auto width	boolean	Enable or disable width auto
Auto height	boolean	Enable or disable height auto
Disabled	boolean	Enable or disable disabled

Event_actions

Property	Type	Description
Events	events	Configure event handlers

Authorization

Property	Type	Description
Enable when compliant with policy set	combobox	Select value for authorization disable
Show when compliant with policy set	combobox	Select value for visibility policy set id

Visibility

Property	Type	Description
Display Conditions	conditions configurator	Configure display conditions

Testing_hooks

Property	Type	Description
ID	text	Text value for id
Data test id	text	Text value for data test id

Layout

Property	Type	Description
Padding Class	padding	Configure padding class

Events

Event	Description
On button click	Triggered when the button is clicked
On component init	Triggered when the component initializes
On component destroy	Triggered when the component is destroyed
On global parameters change	Triggered when global parameters change
On Data Hub Change	Triggered when data hub changes

How To Use

Getting Started with Dynamic Button

The Dynamic Button component is a versatile, configurable button element that can be used throughout your application to trigger actions and events.

Basic Usage

1. Add a Dynamic Button to your boardlet by dragging it from the component palette
2. Configure the button text using the Title property (supports i18n translations)
3. Set the button style by choosing from Primary, Secondary, or Ghost types
4. Add click handlers by configuring the ON_BUTTON_CLICK event

Configuration Options

Button Types

• Primary: Use for main actions (e.g., Submit, Save)
• Secondary: Use for secondary actions (e.g., Cancel, Back)
• Ghost: Use for subtle actions that don't need visual emphasis

Button Sizes

• Medium: Default size, suitable for most use cases
• Large: Use when the button needs more prominence
• Extra Large: Use for hero sections or primary CTAs

Adding Icons

You can add icons to the left or right side of the button text:

1. Select the button in the content editor
2. Navigate to the Visual properties section
3. Use the Left Icon or Right Icon picker to select an icon

Event Handling

The Dynamic Button supports the following events:

• ON_BUTTON_CLICK: Triggered when the user clicks the button
• ON_INIT: Triggered when the component initializes
• ON_DESTROY: Triggered when the component is destroyed

Authorization

You can control button visibility and enabled state based on policy sets:

1. Use "Show When Compliant With Policy Set" to control visibility
2. Use "Enable When Compliant With Policy Set" to control enabled state

Tooltips

Add helpful tooltips to provide additional context:

1. Enable "Show Tooltip" in the Visual properties
2. Configure the tooltip text (supports i18n)
3. Set the tooltip placement (top, bottom, left, right)
4. Optionally set a delay before the tooltip appears

Best Practices

• Use clear, action-oriented text (e.g., "Save Changes" instead of "OK")
• Maintain consistent button styles throughout your application
• Use Primary buttons sparingly - typically one per section
• Provide tooltips for icon-only buttons
• Consider disabled states for buttons that require prerequisites

Additional Information

Category: Interactive

Current Version: 6