Buttons

In this section, you’ll learn how to use the button component.

Content

Functions Used > Button Style > Button Type > $addButton[] > $editButton[] > $removeButtons > $removeButtons[] > $removeComponent[] > Create Interaction

Functions Used

Support Callbacks Used

Button Style

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

  • primary - Blue button
  • secondary - Gray button
  • success - Green button
  • danger - Red button
  • link - Redirect button
Buttons: Primary Primary Success Success Danger Danger Secondary Secondary Other Buttons: Link Link Emoji

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

Button Type

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. A $onInteraction[ID] callback, will only 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 need to set their style argument value to link.

$addButton

Adds a button to the response message.

Syntax

$addButton[New row?;Interaction ID/url;Label;Style;(Disable?;Emoji;Message ID)]

Parameters

  • New row? (Type: Bool || Flag: Required): 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.

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

  • Interaction ID/URL (Type: String, URL || Flag: Required): Depending on the button type, you either set it to an Interaction ID which is then used in the $onInteraction[Interaction ID] or $onInteraction callback or a URL if it’s a link button.

You don’t need $onInteraction/$onInteraction[] for URL.

  • Label (Type: String || Flag: Emptiable): The text visible on the button.
  • Style (Type: Enum || Flag: Required): It’s used to specify the button’s background color. If the button has a link/url you have to set this value to link. Check this section for more details.
  • Disable? (Type: Bool || Flag: Vacantable): If set to yes the button can’t be pressed. Defaults as no.
  • Emoji (Type: Emoji || Flag: Vacantable): Adds an emoji inside the button. Emojis have to be either pasted as unicode or be in the following format <:emoji name:emoji ID>.
  • message ID (Type: Snowflake || Flag: Vacantable): Adds a button to the provided message ID. It’s important to note that provided message ID author has to be the bot.

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.

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

Example

$nomention
Hello
$addButton[no;test;Say hello!;primary;no;]
!example Hello Say hello!

$editButton

Edits an already existing button.

Syntax

$editButton[Interaction ID/URL;Label;Style;(Disable?;Emoji;Message ID)]

Parameters

  • Interaction ID/URL (Type: String, URL || Flag: Required): Depending on the button type, you either set it to an Interaction ID which is then used in the $onInteraction[Interaction ID] callback or a URL if it’s a link button.
  • Label (Type: String || Flag: Emptiable): The text visible on the button.
  • Style (Type: Enum || Flag: Required): It’s used to specify the button’s background color. If the button has a link/url you have to set this value to link. Check this section for more details.
  • Disable? (Type: Bool || Flag: Vacantable): If set to yes the button can’t be pressed. Defaults as no. (Optional)
  • Emoji (Type: Emoji || Flag: Vacantable): Edits an emoji inside the button. Emojis have to be either pasted as unicode or be in the following format <:emoji name:emoji ID>. (Optional)
  • Message ID (Type: Snowflake || Flag: Vacantable): Edits a button in a message with the provided ID. It’s important to note that provided message ID author has to be the bot. (Optional)

Example

Trigger: $onInteraction[test]

$nomention
$username said hello!
$editButton[test;Say hello!;danger;yes;]
!example rainbow_key said hello! Say hello!

$removeButtons

Removes all buttons from the triggered message.

Syntax

$removeButtons

Example

Trigger: $onInteraction[test]

$nomention
$username removed all buttons from this message.
$removeButtons
!example rainbow_key removed all buttons from this message.

$removeButtons[]

Removes all buttons from the specified message.

Syntax

$removeButtons[Message ID]

Parameters

  • Message ID (Type: Snowflake || Flag: Required): Removes buttons from the message with the provided ID. It’s important to note that provided message ID author has to be the bot.

Example

$nomention
$username removed all buttons from the specified message ID.
$removeButtons[$message]
Message ID: 1291982295888166974 !example 1291982295888166974 rainbow_key removed all buttons from the specified message ID.

$removeComponent

Removes a certain component from a message.

Syntax

$removeComponent[Interaction ID/URL;(Message ID)]

This function supports select-menu and button.

Parameters

  • Interaction ID/URL (Type: String || Flag: Required): The interaction ID of the button, to remove from the message.
  • Message ID (Type: Snowflake || Flag: Vacantable): Removes the button from the message with the provided ID. It’s important to note that provided message ID author has to be the bot. (Optional)

Example

$nomention
$username successfully removed the button!
$removeComponent[test;$message]

example

example

Create interaction

Example with $onInteraction[] callback:

  1. Create two commands with !example and $onInteraction[test] triggers.
  2. Paste the following code: Code for the command with the !example trigger:
$nomention
Click the button below!
$addButton[no;test;Click;primary]
$addButton[no;button;Button disabled;secondary;yes]
$addButton[yes;https://botdesignerdiscord.com/;Link;link]

Code for the command with the $onInteraction[test] trigger:

$nomention
$editButton[test;Clicked;danger;yes]
$sendMessage[$username hello!]

Note that the interaction ID provided in $onInteraction[] is the same as the one provided in $addButton[]

In $addButton[], yes is being used for the new row? argument so that the button would appear in the next row.

  1. Execute command !example

example

Example with $onInteraction callback:

  1. Create two commands with !example and $onInteraction triggers.
  2. Paste the following code: Code for the command with the !example trigger:
$nomention
Click the button below!
$addButton[no;test;Click;primary]
$addButton[no;button;Button disabled;secondary;yes]
$addButton[yes;https://botdesignerdiscord.com/;Link;link]

Code for the command with the $onInteraction trigger:

$nomention
$if[$customID==test]
    $editButton[test;Clicked;danger;yes]
    $sendMessage[$username hello!]
$endif

Note that the interaction ID returned by $customID will be the same as the one provided in $addButton[]

In $addButton[], yes is being used for the new row? argument so that the button would appear in the next row.

  1. Execute command !example

example

How $onInteraction or $onInteraction[] works?