interactions-styled

Buttons

Here we're gonna learn how to use buttons in the styled way hell yeah

Creating a button

Basic button

I just want a simple blue button with a message saying "Hi!", watch:

from discord_styled.buttons import buttons, button

my_buttons = buttons(
    button(label="Hi!")
)
1
2
3
4
5
from discord_slash.utils.manage_components import create_button, create_actionrow
from discord_slash.model import ButtonStyle

my_buttons = create_actionrow(
    create_button(style=ButtonStyle.primary, label="Hi!")
)
1
2
3
4
5
6

Link buttons are a type of component button that redirects to a url direction on a browser:

v0.3.2 auto-detect link buttons, so you don't have to define style anymore.

from discord_styled.buttons import button

# NOW
button(label="Go to GitHub", url="https://github.com/discord-styled")

# BEFORE
button(style="URL", label="Go to GitHub", url="https://github.com/discord-styled")
1
2
3
4
5
6
7
from discord_slash.utils.manage_components import create_button
from discord_slash.model import ButtonStyle

create_button(style=ButtonStyle.URL, label="Go to GitHub", url="https://github.com/discord-styled")
1
2
3
4

More complex

Let's create three buttons, different colors, custom ids and labels

from discord_styled.buttons import buttons, button

my_buttons = buttons(
    button(label="Blue button!", custom_id="blue"),
    button(style="green", label="Green!", custom_id="green"),
    button(style="red", label="And Red!", custom_id="red")
)
1
2
3
4
5
6
7
from discord_slash.utils.manage_components import create_button, create_actionrow
from discord_slash.model import ButtonStyle

my_buttons = create_actionrow(
    create_button(style=ButtonStyle.primary, label="Blue button!", custom_id="blue"),
    create_button(style=ButtonStyle.green, label="Green!", custom_id="green"),
    create_button(style=ButtonStyle.red, label="And Red!", custom_id="red")
)
1
2
3
4
5
6
7
8

Sending the message

If you've already read the discord-interactions documentation, you should know we just have to do the following:

await ctx.send("My message", components=[my_buttons])
1

Responding

When responding, you have 3 choices in how you handle interactions, BUT, discord_styled only supports styled solutions for the wait_for way

I'm pretty sure Global event and Component callbacks (I love this one) are really, really well-made so, let's leave these functions in peace for now...

Wait for interaction

This is the way how we do it:

from discord_styled.buttons import wait_button

await ctx.send("My message", components=[my_buttons])

button_ctx = await wait_button(bot, my_buttons)
await button_ctx.edit_origin(content="Let's gooo!")
1
2
3
4
5
6
from discord_slash.utils.manage_components import wait_for_component

await ctx.send("My message", components=[my_buttons])

button_ctx = await wait_for_component(bot, components=my_buttons)
await button_ctx.edit_origin(content="Let's gooo!")
1
2
3
4
5
6

Reference

To know all about discord_styled.buttons functions, parameters, types, go to the API Reference

More about buttons

If you want to know more about button components, I mean, you should've already read this documentation, BUT as a reminder, read discord-interactions docsopen in new window