> For the complete documentation index, see [llms.txt](https://shandler.js.org/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shandler.js.org/buttons/buttonclick-event.md).

# buttonClick Event

## Button Clicks

When someone clicks on a button or uses a dropdown, it will fire an event called 'buttonClick'.

```javascript
client.on('buttonClick', async (button) => {
});
```

### Replying to buttons

We can reply when a button is clicked using `.reply()`.

```javascript
button.reply("");
```

If needed, you are able to add embeds, flags, attachments, and type in the reply. Check [Methods](/interactions/methods.md#interaction).

### Updating buttons

We can edit the original message that had the buttons using `.update()`.

```javascript
button.update("");
```

If needed, you are able to add embeds, flags, attachments, and type in the reply. Check [Methods](/interactions/methods.md#interaction).

## Examples

### Buttons

Here is an example of how to check for button IDs and how to handle them. [**Example**](https://github.com/GmBodhi/shandler-example-bot/blob/master/index.js#L29-L67)\*\*\*\*

```javascript
client.on('buttonClick', async (button) => {
    if (button.data.custom_id === "1") {

        button.reply("Heya!"); //Reply to the interaction.

    } else if (button.data.custom_id === "2") {

        button.update("Edited the button :)"); //This will edit the original message. 

    } else if (button.data.custom_id === "3") {

        button.reply("Heya!", { flags: 64 }); //This will reply to the interaction with an ephemeral message. 

    } else if (button.data.custom_id === "4") {

        let cmp = [
            {
                "type": 1, "components": [
                    { "type": 2, "style": 1, "label": "Button 1", "custom_id": "3" },
                ]
            }
        ];

        button.update("Buttons!", { components: cmp });

    };
});
```

### Dropdowns

Here is an example of how to check for dropdown information and how to handle them. [**Example**](https://github.com/GmBodhi/shandler-example-bot/blob/master/index.js#L68-L73)\*\*\*\*

```javascript
client.on('buttonClick', async (button) => {
    if (button.data.custom_id === "dropdown1") {

        if (button.data.values[0] === "hmmm") {

            button.reply(`🤔`)

        } else if (button.data.values[0] === "test") {

            button.reply(`Tests`)

        }
    };
});
```