LED (lv_led)

A small rectangle or circle that mimics an LED. Brightness controls how dark the color appears.

Edit on GitHub

Overview

An LED is a small rectangle or circle with adjustable brightness. Lower brightness makes the color darker.

Color

You can set the color of the LED with lv_led_set_color(led, lv_color_hex(0xff0080)). This will be used as its background color, border color, and shadow color.

Brightness

You can set their brightness with lv_led_set_brightness(led, brightness). The brightness value should be in the range 0 (darkest) to 255 (lightest).

Toggle

Use lv_led_on(led) and lv_led_off(led) to set the brightness to a predefined ON or OFF value. The lv_led_toggle(led) toggles between the ON and OFF state.

You can set custom LED ON and OFF brightness values by defining macros LV_LED_BRIGHT_MAX and LV_LED_BRIGHT_MIN in your project. Their default values are 255 and 80. These too must be in the range [0..255].

Styling

lv_led_set_color drives the base lit look (background, border, and shadow color), but the LED is still a base widget so the full style stack applies on top. Use style_border_* for a tight ring, a tinted style_outline_* for a soft halo, style_shadow_* for the glow, and style_radius to switch between round, rounded-square, and hard square indicators. The example demonstrates three different LED looks — round with halo, square with hard border, and a dimmed "pending" indicator — built entirely from local style_* props.

Events

By default, LED Widgets are created without the LV_OBJ_FLAG_CLICKABLE flag, but you can add it to make the Widget detect and send events LV_EVENT_CLICKED.

Last updated on

On this page