discord.js - Imagine an app•2d ago

ComponentsV2 - How to set more than one button

Hello, I want to set ActionRows with maximum 5 buttons but we can't set more, and since on a section the setButtonAccessory is toset one I can't set a range of buttons (for play, stop shuffle, ect..)

    const components = [
        new ContainerBuilder()
          .addSectionComponents(
            new SectionBuilder()
              .addTextDisplayComponents(
                new TextDisplayBuilder().setContent(`:playing_song: **\`${song.name}\` by \`${song.uploader?.name}\`**`),
                new TextDisplayBuilder().setContent(`00:00 ${songdurationbar_pointer}${incompletedurationbar} ${song.formattedDuration}`)
              )
          ),
        new SeparatorBuilder().setSpacing(SeparatorSpacingSize.Small).setDivider(true),
        new ContainerBuilder()
          .addSectionComponents(
            new SectionBuilder()
              .addTextDisplayComponents(
                new TextDisplayBuilder().setContent(`:volumeicon: \`???\`%`)
              )
              .setButtonAccessory(
                  new ActionRowBuilder().addComponents(stop, playpause, skip, shuffle, repeat),
                  new ActionRowBuilder().addComponents(upvol, downvol)
              )
          )
    ]

    const components = [
        new ContainerBuilder()
          .addSectionComponents(
            new SectionBuilder()
              .addTextDisplayComponents(
                new TextDisplayBuilder().setContent(`:playing_song: **\`${song.name}\` by \`${song.uploader?.name}\`**`),
                new TextDisplayBuilder().setContent(`00:00 ${songdurationbar_pointer}${incompletedurationbar} ${song.formattedDuration}`)
              )
          ),
        new SeparatorBuilder().setSpacing(SeparatorSpacingSize.Small).setDivider(true),
        new ContainerBuilder()
          .addSectionComponents(
            new SectionBuilder()
              .addTextDisplayComponents(
                new TextDisplayBuilder().setContent(`:volumeicon: \`???\`%`)
              )
              .setButtonAccessory(
                  new ActionRowBuilder().addComponents(stop, playpause, skip, shuffle, repeat),
                  new ActionRowBuilder().addComponents(upvol, downvol)
              )
          )
    ]

21 Replies

d.js toolkit•2d ago

- What's your exact discord.js npm list discord.js and node node -v version? - Not a discord.js issue? Check out #other-js-ts. - Consider reading #how-to-get-help to improve your question! - Explain what exactly your issue is. - Post the full error stack trace, not just the top part! - Show your code! - Issue solved? Press the button!

Tomsoz•2d ago

with a SectionBuilder you can only have one accessory (either a button or a thumbnail) if you want multiple buttons in a row you need to call .addActionRowComponents directly on the ContainerBuilder and add an action row to that

! ! !!!! BefAci.jsOP•2d ago

but it didnt work

! ! !!!! BefAci.jsOP•2d ago

old code : https://pastebin.com/ebidmpUg

Pastebin

D.JS 14.19.3 NodeJS v22 - Pastebin.com

Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time.

Tomsoz•2d ago

new SectionBuilder()
              .addTextDisplayComponents(
                new TextDisplayBuilder().setContent(`:volumeicon: \`???\`%`)
              )
              .setButtonAccessory(
                  new ActionRowBuilder().addComponents(stop, playpause, skip, shuffle, repeat),
                  new ActionRowBuilder().addComponents(upvol, downvol)
              )

new SectionBuilder()
              .addTextDisplayComponents(
                new TextDisplayBuilder().setContent(`:volumeicon: \`???\`%`)
              )
              .setButtonAccessory(
                  new ActionRowBuilder().addComponents(stop, playpause, skip, shuffle, repeat),
                  new ActionRowBuilder().addComponents(upvol, downvol)
              )

not 100% sure but i think this accepts a single ButtonBuilder and not an action row

! ! !!!! BefAci.jsOP•2d ago

yes that's what i said but how?

Tomsoz•2d ago

so im assuming that stop, playpause etc are variables to ButtonBuilders

! ! !!!! BefAci.jsOP•2d ago

because here the addactionrow function is what i want exact

Tomsoz•2d ago

okay so you cant add an action row to a SectionBuilder you bneed to add it to the ContainerBuilder

d.js docs•2d ago

:method: ContainerBuilder#addActionRowComponents() [email protected] Adds action row components to this container.

mallusrgreat•2d ago

You'll have to add them outside the section. Sections only support directly adding the button, action rows can't be added

! ! !!!! BefAci.jsOP•2d ago

okay let me retry like that, yea?

        new ContainerBuilder()
          .addTextDisplayComponents(
            new TextDisplayBuilder().setContent(`:volumeicon: \`???\`%`)
          )
          .addActionRowComponents(
            new ActionRowBuilder().addComponents(stop, playpause, skip, shuffle, repeat),
            new ActionRowBuilder().addComponents(upvol, downvol)
          )

        new ContainerBuilder()
          .addTextDisplayComponents(
            new TextDisplayBuilder().setContent(`:volumeicon: \`???\`%`)
          )
          .addActionRowComponents(
            new ActionRowBuilder().addComponents(stop, playpause, skip, shuffle, repeat),
            new ActionRowBuilder().addComponents(upvol, downvol)
          )

mallusrgreat•2d ago

yes

Tomsoz•2d ago

yeah that looks right

! ! !!!! BefAci.jsOP•2d ago

https://pastebin.com/hcRMJdqr

Pastebin

D.JS 14.19.3 NodeJS v22 - Pastebin.com

Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time.

! ! !!!! BefAci.jsOP•2d ago

ive got the almost same error

mallusrgreat•2d ago

the error references a SectionBuilder the code isn't updated

! ! !!!! BefAci.jsOP•2d ago

well here my components:

const components = [
        new ContainerBuilder()
          .addSectionComponents(
            new SectionBuilder()
              .addTextDisplayComponents(
                new TextDisplayBuilder().setContent(`:playing_song: **\`${song.name}\` by \`${song.uploader?.name}\`**`),
                new TextDisplayBuilder().setContent(`00:00 ${songdurationbar_pointer}${incompletedurationbar} ${song.formattedDuration}`)
              )
          ),
        new SeparatorBuilder().setSpacing(SeparatorSpacingSize.Small).setDivider(true),
        new ContainerBuilder()
          .addTextDisplayComponents(
            new TextDisplayBuilder().setContent(`:volumeicon: \`???\`%`)
          )
          .addActionRowComponents(
            new ActionRowBuilder().addComponents(stop, playpause, skip, shuffle, repeat),
            new ActionRowBuilder().addComponents(upvol, downvol)
          )
    ]

const components = [
        new ContainerBuilder()
          .addSectionComponents(
            new SectionBuilder()
              .addTextDisplayComponents(
                new TextDisplayBuilder().setContent(`:playing_song: **\`${song.name}\` by \`${song.uploader?.name}\`**`),
                new TextDisplayBuilder().setContent(`00:00 ${songdurationbar_pointer}${incompletedurationbar} ${song.formattedDuration}`)
              )
          ),
        new SeparatorBuilder().setSpacing(SeparatorSpacingSize.Small).setDivider(true),
        new ContainerBuilder()
          .addTextDisplayComponents(
            new TextDisplayBuilder().setContent(`:volumeicon: \`???\`%`)
          )
          .addActionRowComponents(
            new ActionRowBuilder().addComponents(stop, playpause, skip, shuffle, repeat),
            new ActionRowBuilder().addComponents(upvol, downvol)
          )
    ]

Tomsoz•2d ago

not 100% but i think you need to have either a thumbnail or a button on a SectionBuilder its erroring because you only have text so you can just replace that with a normal TextDisplayBuilder

! ! !!!! BefAci.jsOP•2d ago

oh okay let me try then thanks it works!

Tomsoz•2d ago

Gaming

Programming

ComponentsV2 - How to set more than one button

Did you find this page helpful?