How to add Buttons to your command [interactions.py]

Last time, we created a simple slash command with interactions.py. However, if you go around Discord and use different bots, you will see that there are some commands that use buttons to let you interact with the bot. This is pretty cool, and you may want to do the same, so let's see how it can be done with interactions.py.

Disclaimer: I will create a new sample file for this post, however, you can add it in your main one if you like.

Assuming that you have already imported the main library, declare the client and start the bot from the previous post, we will walk straight in with creating button.

Button

First, let's create a global variable for the button.

button = interactions.Button(
    style=interactions.ButtonStyle.PRIMARY,
    label="Click me!",
    custom_id="click_me",
)

• interactions.Button: This object forms the button that we will send to Discord API.
• style: The style of the button. Currently, Discord supports a variety of styles that you can use. You can have a look in this image below.
• label: The label of the button. This is the text that displays on the button.
• custom_id: This is the customized ID that we will receive when someone clicks on the button. We will need this for the component callback to do the job we want to.

We have a button now, so what's next? Send it, of course.

@client.command(
    name="button",
    description="Send a button",
)
async def _button(ctx: interactions.CommandContext):
    await ctx.send(components=button)

• components=button: components is used to form the component in the message.

Run the bot and use the command. If you see something like this, congratulations, you just create a button with interactions.py, but hold on, when you click on it, nothing happens and you get a "This interaction failed".

The reason for this is because we haven't added a button callback yet. When we click on the button, it creates an INTERACTIONS_CREATE dispatch gateway event and we need a button callback to handle that event.

@client.component("click_me")
async def _click_me(ctx: interactions.ComponentContext):
    await ctx.send("Clicked!")

• @client.component(): This is the decorator that handles specifically component event. click_me is the custom_id that we create above. What this will do is listening to the INTERACTIONS_CREATE dispatch gateway event and see if it matches with the custom_id that we create.

Now that we have a button, a command and a callback event, let's run the bot again and test it. If you have something like this, congratulations, you just create a functioning command with button that you can interact with interactions.py.

Action Rows

Action Rows is a way to organize your components into rows. According to Discord, you can have up to 5 Action Rows per message and each Action Row cannot contain another Action Row.

Now that you have a good look with Action Rows, let's do it with interactions.py.

button =[
    interactions.ActionRow(
        components=[
            interactions.Button(
                style=interactions.ButtonStyle.PRIMARY,
                label="Click me!",
                custom_id="click_me",
            ),
            interactions.Button(
                style=interactions.ButtonStyle.DANGER,
                label="Do not click!",
                custom_id="do_not_click",
            ),
        ]
    )
]

@client.command(
    name="button",
    description="Send a button",
)
async def _button(ctx: interactions.CommandContext):
    await ctx.send(components=button)

@client.component("click_me")
async def click_me(ctx: interactions.ComponentContext):
    await ctx.send("Clicked!")

@client.component("do_not_click")
async def do_not_click(ctx: interactions.ComponentContext):
    await ctx.send("You clicked the wrong button!")

• interactions.ActionRow(): this object is responsible for creating an Action Row and send it to Discord.
• components: this is a list of Button that we will send to Discord API.

Once you finish with copying the above code into your bot file, run the bot and execute the command. If you see something like this, congratulations, you just created an Action Row with interactions.py.

Stay tuned with upcoming post about interactions.py and how you can take advantage of the library. If you like this post, be sure to give a heart. If you have any question, let me know in the comment section. Alternatively, you can join the official interactions.py Discord server for further help.