Everything you need to know about BUTTONS! (the full guide) | discord.js v13 tutorials

hey guys welcome back to the guide on discord.js official buttons in this video i'll be covering the things that you need to know to use and make buttons on discord.js version 13. for your information you can use the sql buttons npm package on discord.js version 13 so you might want to stick around and update your code if you are still on version 12 you can use npm i discovered js at dev to use the latest features of the master branch so you can do that simply by opening terminal okay let me just zoom in okay all you need to do is npm i discord js and you should be good to go let me string this back and then yeah let's move on to our first topic which is creating a button so let me just create a command real quick um let me just create a category called buttons so you can demonstrate all the buttons and then in here you can just do buttons.js all right so we're just going to use the basic setup uh assuming djs and then we're just going to call this um this command button all right so let's say you want to send a message with some buttons so let's just create a function to send the message message channel send and then here you're just going to content a hello world okay so in here once you've done your content just going to make a comma and then you're just going to do components okay so what this component sticks in it's taking in of the message action row so let me just show you guys what message action role is so let me just record it from desktop.js real quick as well as buttons so we can do that by message button so basically message button is actually inside of the message action row which will be passed into the components in here so let me show an example if i want to create a uh a action row with a button in it so you can just do cons row it goes to new message action row it works the same way like message embeds and then uh you can just do add components okay so the first component we're just gonna add a button so you can add like a a slider a you know a menu button or whatever it is so in this case i'm just going to show an example with buttons so i'll explain more on this later so set custom id we're just going to pass in something like a random okay and then i'll set label and i'm just gonna do primary okay uh don't worry about this i'll explain about labels uh the styles whatever it is so that means uh primary and then set okay that's all yep okay so this is uh what i mean by message action row so message action row is actually the parent and then we just can add the components inside of it so for each uh message uh the maximum amount of message action rule you can add is five message action row so basically you only can add five rows inside a component and then you only can add five components inside a message action row if that makes any sense okay don't worry about this if you face any issues feel free to post all the links will be in the description uh our staff team will be helping you guys all right so this is a basic button okay actually you can just pass this in let's just try this out because why not okay let me just go to discord and then uh let me see if the bot is ready what is the issue i can just ignore that all right so we can do exclamation mark button and as you can see here uh hello world primary so if i click on this it's just going to say interaction fail because we haven't handled this button yet all right so um we can actually also disable a button by doing the set disabled and then we can just pass in true or false so it falls it's clickable and if it's true you can't click it so let me show an example real quick if i said you're true and then if i go back to discord i do button and you see here i can't click the button anymore all right so next um we're gonna talk about colors so um it's actually in set style so there's a few styles in here so let me show you guys a danger link primary secondary success of you only can have five types of color of buttons as per right now as per recording this video so you should see an image on the screen right now you see all of the uh colors and uh how does it look actually so let me just experiment with uh this with some buttons so i'm actually gonna create every single button in here so we can actually copy this and then we can just add commas oops it's actually really messy for five and then we can just uh format it all right so this is going to be the primary button so let me just set customary to primary and then set label primary correct and then we're just going to set primary in here which is going to be blue and then set disabled we're not going to use set disabled all right because we're just going to demonstrate let me just remove all the set disabled real quick all right okay so this is our second button so i'm just going to call this secondary and then the label which is the title of the uh secondary button okay i'm just gonna do secondary bt bt and then set style we're just going to do secondary all right and then third one is going to be success which is going to be green uh and then we can just do in here's success and then set style you can just do success okay and then the next one is going to be danger which is going to be red so let me just do something okay because id is not important as per right now so let me just show you guys uh the labels and the styles so danger and we can just set style to danger as well and then lastly is the link so we can uh okay so for link it's a little different so let me just uh i'm not just gonna i'm not gonna show you guys how to use link right now so let me show you four of these buttons right now okay so if i head on to discord i do a wipe uh exclamation mark button you'll see here there's primary and this is the second secondary button so as you can see here this is the title of the button and this is the id of the button okay so secondary button is here success button is here which is green and then danger lastly danger we have it in red so what's let's say you want to create a link button so it's actually pretty simple but there is no custom id for link buttons so let me just create a link button so new message button we'll set uh label will be youtube okay so let me just say i want to link my youtube into this button and then we can just do set and then uh we can and we're going to do set url set url and then just passing out url in here which is https uh youtube.com slash reconnail x okay and then we can just set delay do we send the label already yup you set the label already and then uh we can also set the style which is going to be linked all right so do keep in mind that set url only works if the style is linked if it's not linked the setup url won't work let me save this and let's just try this out extremation button because here if i click on here it's going to bring me to youtube.com require so let me just click on yep and let's just see yeah this is my youtube channel alright so that is all about the button style let me just move on to teaching you guys how to respond to the buttons so there's two ways to respond to your buttons the first way is actually using the events the other way is using button collector so i will show you guys how to use the event first then i'll show you guys how to use the button collector later on so um for this i'm just going to go to the event section and i'm going to go to interaction create section all right so this is for the command this last command video if you haven't seen the it i'll link it down in the description there's two parts of the video so yeah okay so to register buttons it's actually pretty simple so you can just do if interaction dot s button okay so it's gonna say that once it's in here it's definitely a button all right and then we can just do console.log interaction so we can look at the interaction and then this is not necessary i'm just gonna debug it i mean i'm just gonna show you guys what's going on and then we can just do interaction the reply and then uh we can just say uh content uh and then we can just do interaction we can just say who clicked me so you can just do interaction the user attack clicked me all right it's pretty simple so let's just try this out so if i click on button okay this here recon clicked me it doesn't matter uh when the button was sent because whenever you click a button an interaction event will be fired so click on here it's gonna say uh we're gonna click me and then click on danger it's gonna send okay it's going to sound like that okay it's very simple okay so if i open up the terminal and then if i make it a little bigger okay you can see all of these you can have the message and then you can have the custom id okay which is success and then we actually make some checks in here so i will show you guys how to make that as well so okay so we're gonna check if it's primary it's gonna send primary if the secondary button is going to send a secondary button and if it's the other buttons we're just going to say um you click the wrong button okay what about that okay so if the interaction what was that custom id is equals to primary we can type we're just going to do a message interaction dot reply and then we can use content um you click the primary button all right let me just put it i need that a little bit all right perfect and then else if interaction the custom id is equals to secondary we're just gonna do interaction dot reply and then we just do content um you clicked on a secondary button okay so we're just gonna take in both of these if it's the other buttons we're just going to say that you click the wrong button so you can do that by doing else return interaction dot reply and then content um you click the wrong button we'll just save this and let's just test this out so if i go back to discord okay and i do button again so you can get all the new buttons so click on success it's gonna say you click on the wrong button if i click on primary it's going to say you click on primary button which is specified over in here and then if i click on security secondary button it's going to say you click on secondary button which is also specified in here if i click on danger it's going to say you click the wrong button so let me just try to click on that because here you click the wrong button all right so um that should be it for the interaction uh create event all right so let's just say you want to make a band command and using events is actually not the way to go because you want to have access to the message when i have access to the args so there's a way to use bank commands with buttons so that's called the message component collector so let me just create a banned command real quick a fake ban command so let's just see that just assume that this is a ban command and then we can just add some buttons so we can just control equals to new message action role and then we can just set um add components and then we can just add a message button we spot this and then i'll set set label and i'm just going to say yes and then we can just do set uh style we want it green so we're just going to say success and then i'll set custom id and then just say yes okay so this the yes button and the other button is going to be the no button so new message button and then we can just do label set label uh no and then set style style danger so uh we want the euro because we want it to be red and then set custom id oops there shouldn't be a comma in here dot set custom id and then here we're just gonna do no all right so this is buttons and then we can just do um message message.channel.send and then we can do content i'm gonna do are you sure are you sure you want to ban this user question mark and we just do in here comma and then we're gonna pass in the components components and then we can just passing row in here all right so let's just test this out if i go to discard and i can do button uh oh it's banned okay i usually want to manage easier yes or no so this is just a fake command so don't use this as your band command because it's not actually going to ban just a test all right so we can easily create a collector by defining collector first cons collector equals message.channel.create um messagecomponentcollector all right and then uh we're gonna have a filter and then we're just gonna have a max of one so we only want a single button per collector so let me just define a filter real quick so you can just do cons filter equals to a function i don't know why you keep doesn't uh why keep doing that so interaction okay so you need to make sure that the interaction the user the id is equals to message the alter the ids because we only want the author to be able to use this button all right actually we can do this um if if this and then we can just do a return true else we're just going to return interaction the reply intellection dot follow let me just interact in the reply and then content you can't use this button so it only allows the message author id to use this uh to register the uh message component collector or else it's just gonna say you can't use this button okay perfect um so we have our collector in here the filter is over in here and then next we're just going to do collector now stop so once it gets i mean filter on and okay so once it gets a single um a single interaction it's gonna trigger this event over here and we're gonna have access to the interaction so let's call this button interaction okay and then uh we can just do console.log button interaction.first and then we can get the custom id custom id all right so uh if i try to run this again estimation about ben okay if i pull up my terminal at the side so you can see it if you don't know you can see here it it registers no and if i click on yes it's not going to register anymore because the maximum amount of direction that we're going to receive is 1. so we can just do a simple if statement in here let me just say um and here we can just pass in something like const id equals to this and then um if id is equals to and then we're going to check the id um yes and then we're just going to do return message dot channel send band user or else if or else it's going to be if id is equals to no and then we're just going to say uh canceled actually some messenger channel.send and then can sold action okay all right so if i go on this card and do extreme shaman ban and then you should see are you sure you want to ban this user so you can click on yes and then you can say blend user and then if i click on no again it wouldn't say anything anymore because it's only taking one uh one interaction so let me just fix this this interaction field so you can do this by doing um button interaction log first dot defer update all right actually say uh we can actually send the reply in here so we can just do um remove this and let me just do old interaction create real quick okay and then um in here instead of sending a message we're just gonna do button interaction the first dot reply and then we can just pass into reply which is banned okay the same thing over here we're just going to change this into button interaction.first.reply right perfect okay so if i try to run exclamation mark and again and then if i click on yes it's gonna say banned and if i click on no it's not gonna say uh ban anymore so if i try to run ban again and click on no it will say canceled action so that should be it for the buttons guide so if you have any more questions or anything you need to touch on free freedom support so links will be in description if you want to watch more tutorials tutorials you see a place and click on on the screen right now aren't that have a nice day see you next video bye

Channel: reconlx

Views: 16,717

Keywords:

Id: e3EYsrasPms

Length: 19min 43sec (1183 seconds)

Published: Wed Jul 21 2021