Getting Started with Buttons

The Basics

First, I recommend checking out the Overview and Example Payload in our documentation. Click here to see all of the button's documentation.

Adding Buttons to Commands

To add a button or buttons to a command we need to set it up a little like this. Example****

let cmp = [
    {
        "type": 1, "components": [
            { "type": 2, "style": 1, "label": "Button 1", "custom_id": "1" }, //this is your first button
            { "type": 2, "style": 4, "label": "Button 2", "custom_id": "2" } //this is your second button
        ]
    }
]
interaction.reply("Pong!", { components: cmp, type: 4 })

Find all the possible components for the payload here.

You can find all options for "type" here. Find all the options for "style" here. "label" is the name of the button that will be shown. The "custom_id" is the id of the specific button to be accessed later, we will address this more later.

Action Rows

Adding multiple rows of buttons looks a little like this. Example****

let cmp = [
    {
        "type": 1, "components": [
            { "type": 2, "style": 1, "label": "Button 1", "custom_id": "1" }, //this is your first button on the first row
            { "type": 2, "style": 4, "label": "Button 2", "custom_id": "2" } //this is your second button on the first row
        ]
    },
    {
        "type": 1, "components": [
            { "type": 2, "style": 1, "label": "Button 3", "custom_id": "11" }, //this is your first button on the second row
            { "type": 2, "style": 4, "label": "Button 4", "custom_id": "22" } //this is your second button on the second row
        ]
    }
]