Documentation / Widgets / Basic / Button

Button

An lv_button with a centred label child. The label is generated as ui_<Name>_label so you can restyle it separately. With an icon, the icon (a second label, in an icon font) and the caption share a content-sized row or column, ui_<Name>_content, which is centred instead.

Group: Basic · Default size: 100 × 50 · Style parts: Main

A dropped Button: a blue rounded button saying Button in the middle of the screen.
A Button as it is dropped.
The Button settings section: Text Button, Icon None, and the To be translated tick box.
Its settings. Icon position, size and gap appear once it has an icon.
SettingDefaultWhat it does
TextButtonThe caption.
Icon(none)An icon from the icon library, drawn in the button's text colour - so it follows the Pressed and Checked styles with the caption.
Icon positionLeft of the textLeft of, right of, above or below the caption.
Icon size20 pxThe icon's square box, 8 to 160 px. 21 and 42 px are the sharpest.
Icon gap6 pxSpace between icon and caption. Ignored when the caption is empty.

Example: a button that opens another screen

  1. Add a second screen with + in the Screens list, select it and set its Name to Settings. Go back to Screen1.
  2. Drag a Button onto Screen1 and set its Name to SettingsButton. Under Button settings set Text to Settings, click Icon and choose Settings (type settings in the search), and set Icon size to 21. Give it a Width of 140 under Geometry.
  3. Open Events and press Add event. Leave the trigger on Clicked; set Action to Change Screen, Screen to load to Settings, Fade mode to Move left and Speed to 300.
  4. Press Preview and click the button: the Settings screen slides in from the right.
A wide blue button with a cog icon and the word Settings.
A button with an icon beside its caption.
The Events section: Clicked, Change Screen, Screen to load Settings, Fade mode Move left, Speed 300 ms.
Clicked loads the Settings screen.