Discord.js – How to change style of Button

Issue

This is how I create and send the button:

client.on('messageCreate', (message) => {
    /* ... Checking Command ... */

    const actionRow = new MessageActionRow().addComponents(
        new MessageButton()
        .setStyle("PRIMARY")
        .setLabel("X")
        .setCustomId("test"));


    message.channel.send({ content: "Test", components: [actionRow] });
}

A blue Button appears in the chat, as expected.

This is my Button-Listener:

client.on("interactionCreate", (interaction) => {
    if (interaction.isButton()) {
        if (interaction.customId === "test") {
            //Before: console.log(interaction.component);

            interaction.component.setStyle("DANGER");

            //After: console.log(interaction.component);
        }
    }
});

Logging the component-object before and after .setStyle("DANGER") also reveals, that the style got changed from Primary to Danger successfully.

But in my Discord Client, the Style/Color didn’t change, and ontop of that I am getting an error, saying that the interaction failed.

The style-property doesn’t seem to be read-only: https://discord.js.org/#/docs/main/stable/class/MessageButton?scrollTo=style

So what am I doing wrong?

Solution

You updated the style only locally, you didn’t send the changed component back to the Discord API.

To get rid of the error "This interaction failed", you need to respond to the interaction. One way to respond is to use MessageComponentInteraction.update(), which updates the original message.

client.on("interactionCreate", (interaction) => {
    if (interaction.isButton()) {
        if (interaction.customId === "test") {

            // Change the style of received button component
            interaction.component.setStyle("DANGER");

            // Respond to the interaction,
            // and send updated component to the Discord API
            interaction.update({
                components: [
                    new MessageActionRow().addComponents(interaction.component)
                ]
            });

        }
    }
});

enter image description here

To make this work with multiple buttons, use the example below.

client.on("interactionCreate", (interaction) => {
    if (interaction.isButton()) {
        // Make this work only for certain buttons,
        // with IDs like switch_0, switch_1, etc.
        if (interaction.customId.startsWith("switch_")) {

            // Change the style of the button component,
            // that triggered this interaction
            interaction.component.setStyle("DANGER");

            // Respond to the interaction,
            // and send updated components to the Discord API
            interaction.update({
                components: interaction.message.components
            });

        }
    }
});

enter image description here

Answered By – Skulaurun Mrusal

Answer Checked By – Dawn Plyler (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.