ESP32 - Button Toggle LED

This tutorial instructs you how to use ESP32 to toggle the state of an LED between ON and OFF when a button is pressed. More specifically:

The ESP32 codes contains code for a button toggles an LED without and with debouncing

Hardware Used In This Tutorial

1×ESP-WROOM-32 Dev Module
1×USB Cable Type-C
1×Push Button
1×(Optional) Panel-mount Push Button
1×LED
1×220 ohm resistor
1×Breadboard
1×Jumper Wires
1×(Optional) DC Power Jack
1×(Recommended) ESP32 Screw Terminal Adapter

Or you can buy the following sensor kit:

1×DIYables Sensor Kit 30 types, 69 units
Disclosure: some of these links are affiliate links. We may earn a commission on your purchase at no extra cost to you. We appreciate it.

Introduction to LED and Button

We have specific tutorials about LED and button. Each tutorial contains detailed information and step-by-step instructions about hardware pinout, working principle, wiring connection to ESP32, ESP32 code... Learn more about them at the following links:

Wiring Diagram

ESP32 Button LED Wiring Diagram

This image is created using Fritzing. Click to enlarge image

If you're unfamiliar with how to supply power to the ESP32 and other components, you can find guidance in the following tutorial: How to Power ESP32.

ESP32 Code - Button Toggles LED Without Debouncing

/* * This ESP32 code is created by esp32io.com * * This ESP32 code is released in the public domain * * For more detail (instruction and wiring diagram), visit https://esp32io.com/tutorials/esp32-button-toggle-led */ #define BUTTON_PIN 18 // ESP32 pin GPIO18, which connected to button #define LED_PIN 21 // ESP32 pin GPIO21, which connected to led // variables will change: int led_state = LOW; // the current state of LED int button_state; // the current state of button int last_button_state; // the previous state of button void setup() { Serial.begin(9600); // initialize serial pinMode(BUTTON_PIN, INPUT_PULLUP); // set ESP32 pin to input pull-up mode pinMode(LED_PIN, OUTPUT); // set ESP32 pin to output mode button_state = digitalRead(BUTTON_PIN); } void loop() { last_button_state = button_state; // save the last state button_state = digitalRead(BUTTON_PIN); // read new state if (last_button_state == HIGH && button_state == LOW) { Serial.println("The button is pressed"); // toggle state of LED led_state = !led_state; // control LED arccoding to the toggled state digitalWrite(LED_PIN, led_state); } }

Quick Instructions

  • If this is the first time you use ESP32, see how to setup environment for ESP32 on Arduino IDE.
  • Do the wiring as above image.
  • Connect the ESP32 board to your PC via a micro USB cable
  • Open Arduino IDE on your PC.
  • Select the right ESP32 board (e.g. ESP32 Dev Module) and COM port.
  • Copy the above code and paste it to Arduino IDE.
  • Compile and upload code to ESP32 board by clicking Upload button on Arduino IDE
  • Keep pressing the button several seconds and then release it.
  • See the change on LED's state

Line-by-line Code Explanation

The above ESP32 code contains line-by-line explanation. Please read the comments in the code!

In the code, led_state = !led_state is equivalent to the following code:

if(led_state == LOW) led_state = HIGH; else led_state = LOW;

※ NOTE THAT:

The above code does not have the debounce code for button. Without debouncing for button, the unexpected behaviours can occur. See Why need debounce for button. Debouncing for the button is complicated for beginners. Fortunately, the ezButton library does the button debounce for us.

ESP32 Code - Button Toggles LED With Debouncing

/* * This ESP32 code is created by esp32io.com * * This ESP32 code is released in the public domain * * For more detail (instruction and wiring diagram), visit https://esp32io.com/tutorials/esp32-button-toggle-led */ #include <ezButton.h> #define BUTTON_PIN 18 // ESP32 pin GPIO18, which connected to button #define LED_PIN 21 // ESP32 pin GPIO21, which connected to led ezButton button(BUTTON_PIN); // create ezButton object that attach to pin 7; // variables will change: int led_state = LOW; // the current state of LED void setup() { Serial.begin(9600); // initialize serial pinMode(LED_PIN, OUTPUT); // set ESP32 pin to output mode button.setDebounceTime(50); // set debounce time to 50 milliseconds } void loop() { button.loop(); // MUST call the loop() function first if (button.isPressed()) { Serial.println("The button is pressed"); // toggle state of LED led_state = !led_state; // control LED arccoding to the toggleed sate digitalWrite(LED_PIN, led_state); } }

Quick Instructions

  • If this is the first time you use ESP32, see how to setup environment for ESP32 on Arduino IDE.
  • Install ezButton library. See How To
  • Copy the above code and paste it to Arduino IDE.
  • Compile and upload code to ESP32 board by clicking Upload button on Arduino IDE
  • Press button several times
  • See the change on LED's state

Video Tutorial

Making video is a time-consuming work. If the video tutorial is necessary for your learning, please let us know by subscribing to our YouTube channel , If the demand for video is high, we will make the video tutorial.

※ OUR MESSAGES