Row 1 · Buttons
API JSON
[
{
"type": 1,
"components": [
{
"type": 2,
"style": 1,
"label": "Click me",
"custom_id": "click_me"
}
]
}
]discord.js
import { ActionRowBuilder, ButtonBuilder, ButtonStyle } from "discord.js";
const row1 = new ActionRowBuilder().addComponents(
new ButtonBuilder()
.setStyle(ButtonStyle.PRIMARY)
.setLabel("Click me")
.setCustomId("click_me")
);
How to use it
Add up to five action rows. Each row is either up to five buttons or one select menu. Switch to Modal for a title, custom_id, and text inputs. Copy API JSON or the discord.js snippet.
FAQ
What are Discord message components?+
They are interactive bits on a message: buttons (type 2), select menus (types 3 and 5–8), and the action rows (type 1) that hold them. Modals are a separate payload with text inputs (type 4).
How many buttons can one Discord message have?+
Five action rows, five buttons per row — 25 buttons max. A row that holds a select menu can only hold that one select.
What is the difference between API JSON and discord.js?+
API JSON is what you POST to Discord (or pass as components: […]). The discord.js snippet uses ActionRowBuilder / ButtonBuilder helpers that compile to the same structure.
Can I send these components with a webhook?+
Webhooks can send components in some payloads, but most interaction buttons need a bot that handles the custom_id. Use the webhook tester for content/embeds only.
Related tools
Build a Discord bot visually on Kitcord
Buttons are more fun when a real slash command opens them. Snap that flow on Kitcord.
Kitcord is not affiliated with, endorsed by, or sponsored by Discord Inc. Discord is a trademark of Discord Inc.