Buttons

In this section, you'll learn how to use the button components.

demonstration

Button Style

Buttons can have different styles (background colors). Here, are all possible values for style function argument.

  • primary
  • secondary
  • success
  • danger
  • link

📝 If link style is used, the button won't send any interactions!

Style examples

button styles
The image was taken from Discord Docs

Button types

There are 2 types of buttons : interactive and link.

When an interactive button is pressed, it sends an interaction which can be used together with $onInteraction[ID].

Every interactive button has an ID. If you create $onInteraction[ID] callback, it will get triggered when the button with the same ID is pressed. Interactive buttons can use every style except link.

Link buttons don't send any interactions. When they're pressed they forward the user to a website. Link buttons have to set their style argument value to link.

Adding a button

Buttons can be added to a new message or already existing message.

$addButton[New row;Button ID/URL;Label;Style;(Disabled;Emoji;Message ID)]

Function arguments breakdown

  • new row - If set to yes the button will appear in a new row. If it's set to no the button will appear in the same row as a previous button. Check examples below.

    📝 A message can have a maximum of 25 buttons (5 rows of 5 buttons).

  • button ID/url - Depending on a button type, you either set it to interactionID which is then used in $onInteraction[ID] callback or URL if it's link button.

  • label - It's the text value visible on a button

  • style - It's used to specify the button's background color. If the button has a link/url you have to set this to link. Check this section for more details.

  • disabled - If set to yes the button can't be pressed. Defaults as no. (Optional)

  • emoji - Adds an emoji inside the button. Emojis have to be either pasted as unicode or be in this format <:emoji name:emoji ID>. (Optional)

  • message ID - Adds a button to the provided message ID. It's important to note that provided message ID author has to be the bot. (Optional)

Note: Interactive buttons can't have duplicated ID's in the same message. So for example, you can't have two buttons with the ID set to test

Note: If url is used in interaction ID or url argument, it has to start with http:// or https://

Editing a button

$editButton[Button ID/URL;Label;Style;(Disabled;Emoji;Message ID)]

Arguments work exactly the same way as in $addButton function. Button ID/URL is used for finding the button.

Removing buttons

Removing button from a message can be done using these three functions :

Examples

Creating a simple interactive button

code example

Note: The last argument in $addButton is empty because we don't want emojis for this example

Creating $onInteraction[] callback

callback code example

Note: ID provided in $onInteraction[] is the same as the one provided in $addButton[] from this section

Note: In $addButton[], yes is being used for the new row argument so that the button would appear in the next row. Check the output below.

Output

Command execution

demonstration

After pressing the button

demonstration pressed button