Action rows
Action rows are a layout component with five "slots" that can be filled with other components. At the time of writing this guide, buttons take up one slot and select menus take up five "slots". Accordingly, each ActionRow can hold up to 5 buttons or a single select menu. A message can have up to five rows without providing the IsComponentsV2 message flag. If you want to place buttons or action rows into the message body, they have to be wrapped inside rows.
Read our guide section on display components if you want to learn more about those.
Building action rows
To create an action row, use the ActionRowBuilder class and the ActionRowBuilder#addComponents method to add buttons or a select menu.
const row = new ActionRowBuilder().addComponents(component);If you're using TypeScript, you'll need to specify the type of components your action row holds. This can be done by specifying the component builder you will add to it using a generic parameter in ActionRowBuilder.
new ActionRowBuilder()
new ActionRowBuilder<ButtonBuilder>() Sending action rows
Once one or many components are inside your row(s), send them in the components property of your InteractionReplyOptions (extends BaseMessageOptions).
const row = new ActionRowBuilder().addComponents(component);
await interaction.reply({ components: [row] });To learn how to create the buttons and select menus that will go inside your row, including more detailed examples on how you might use them, continue on to the other pages in this section.