Button

The Button widget is a clickable button that runs the action you specify when a reader presses it.
Use it for every action trigger on a screen — confirm, cancel, navigate, and more.

info

Example file: 07_Work_with_Widgets/button_objet.lfp

Definition and role

The Button widget draws a pressable area that holds text and, optionally, an icon. Press it and the action wired to onClick runs. Configure the background color, the border, the corner radius, the size, and the icon position.

• Category: Contents (input and selection)
• Default text: Button
• Default size: width 100, height 50
• Default background color: #009DFF

Features

Feature	Description
Click action	Press the button and the action (logic or script) wired to onClick runs.
Text and background	Set the displayed text and the background color. The text supports data binding.
Icon display	Place an icon next to the text and set its position — top, left, right, or bottom.
Appearance	Adjust the size, alignment, padding, border, and corner radius.

How to use

1. Open the Contents category in the left widget palette.
2. Drag and drop the Button item onto the canvas.
3. In the Properties panel on the right, change text to the label you want.
4. Wire the action (logic or script) that runs on click to onClick.
5. Adjust the background color (fillColor), the icon, and the size if you need to.

Properties

note

Set detailed text styles, such as font color and size, in the shared Style settings. The properties below are specific to Button.

Property	Description	Default	Value / Type
Size	Button size — a grouped property that sets width and height together	Width 100, height 50	Size (width and height, number in px)
alignment	Alignment of the content inside the button	Center	Alignment value
padding	Inner padding of the button	0	Padding value
border	Border	White, 1px	Border value
radius	Corner radius	Not set	Radius value
fillColor	Button background color	#009DFF (blue)	Color
text	String shown on the button (supports data binding)	Button	String
textStyle	Text style (color, size, weight, and more)	Not set	Text style
iconPadding	Icon padding	0	Padding value
iconDirection	Icon position relative to the text	left	top, left, right, bottom
icon	Icon to place on the button (optional)	None	Icon settings

Notes and tips

note

For the button to actually respond, wire an action to onClick. With no action wired, pressing the button does nothing.

tip

Set the font color and size in textStyle (the shared Style settings). Once an icon is on, use iconDirection to move it relative to the text.

Learn more

tip

For the complete Widget Control (Property, Method, and Event) that drives this widget from a script, visit Button Widget Control.