# Getting Started (/examples/get_started)



These examples introduce the core workflow: creating a label, attaching a click callback to a button, applying styles, and reading a slider value through an event. Begin here if you have not written an LVGL program before. Once the patterns feel familiar, move on to Styles and Events for deeper coverage.

Hello world label [#hello-world-label]

<LvglExampleBrief>
  Set the screen background color and place a centered label.
</LvglExampleBrief>

Sets the active screen's background color, creates a label with the text
`Hello world`, sets the screen's text color to white, and centers the
label on the screen.

<LvglExample name="lv_example_get_started_1" path="get_started/lv_example_get_started_1" />

Button with click counter [#button-with-click-counter]

<LvglExampleBrief>
  Increment a label on a button each time it is clicked.
</LvglExampleBrief>

A button sized 120x50 is placed at position (10, 10) on the active screen
with a centered label reading `Button`. The button subscribes to
`LV_EVENT_ALL` and on `LV_EVENT_CLICKED` the callback updates its child
label with `lv_label_set_text_fmt` to show an incrementing counter.

<LvglExample name="lv_example_get_started_2" path="get_started/lv_example_get_started_2" />

Styles from scratch for buttons [#styles-from-scratch-for-buttons]

<LvglExampleBrief>
  Build reusable button styles and apply them with a pressed-state override.
</LvglExampleBrief>

Three `lv_style_t` objects are initialized: a base grey gradient style with
rounded corners and a thin border, a pressed style that applies a darken
color filter at `LV_OPA_20`, and a red style that overrides only the
background colors. Two buttons strip their theme styles with
`lv_obj_remove_style_all`, adopt the base style for the default state and
the pressed style for `LV_STATE_PRESSED`; the second also stacks the red
style and sets a local `LV_RADIUS_CIRCLE` radius.

<LvglExample name="lv_example_get_started_3" path="get_started/lv_example_get_started_3" />

Slider with live value label [#slider-with-live-value-label]

<LvglExampleBrief>
  Mirror a slider's value into a label anchored above it.
</LvglExampleBrief>

A 200 px wide slider is centered on the active screen with a label placed
15 px above it via `lv_obj_align_to` and `LV_ALIGN_OUT_TOP_MID`. An
`LV_EVENT_VALUE_CHANGED` callback reads `lv_slider_get_value` and rewrites
the label text, re-aligning it after each update.

<LvglExample name="lv_example_get_started_4" path="get_started/lv_example_get_started_4" />