Create Custom Discord Buttons with ActionRowBuilder and ButtonBuilder
In this lesson, you will learn how to create custom buttons in Discord.js using ActionRowBuilder and ButtonBuilder. You will also learn how to style and add text to the button using ButtonStyle and the setEmoji method.
We'll need to make these buttons for our book-club message to give users the ability to let us know that they want to be a part of the club.
ActionRowBuilder and ButtonBuilder are important, here's what they do:
ActionRowBuilder is used to create a row of buttons or other action components in a Discord message. This class provides methods for adding buttons, text, and other components to the row, as well as methods for formatting the row.
ButtonBuilder is used to create individual buttons within the ActionRowBuilder. This class provides methods for setting the text, emoji, style, and other properties of the button.
By using them both, we are able to create a row of buttons exactly how we want them to look!
Instructor: [0:00] Now we need a way for our users to respond to our message to let us know that they want to be a part of the book club. To do that, we're going to use a custom button. To be able to create a custom button, first thing we're going to need to do is add in a couple of imports.
[0:19] Action row builder, button builder, and button style for just a little bit of styling. Come down right below our message, and then we'll create a new action row builder. Set that to a variable called row. On top of that, we're going to add some components.
[0:50] Inside here, we're going to create a new button builder. Here's where we add styling and text to our button. We'll set a custom ID, set that to primary. Then we'll add a style, set style. This will be buttonstyle.primary. Currently, there are five different button styles available.
[1:19] Primary, secondary for gray, a success would be green, danger would be red, and then link would also be gray, but give you an option to click on it to bring you somewhere else. Then we're going to add in an emoji, set emoji. I'm going to do the thumbs-up emoji.
[1:38] Now if you didn't want to use an emoji, you can do text with set label instead of set emoji, but for fun, we'll just use an emoji. Then down in our reply, we'll add in our row. This will be components and the value for that will be our button. We'll save, and then head back to Discord.
[2:03] Do our command again. Hit enter. Now, we can see our button. Obviously, this button doesn't do anything right now but we'll get into that later.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!