Is there a way to edit the size of discord buttons?

1.1k Views Asked by At

I'm currently starting a connect 4 discord bot, and use buttons in order for the person to place their piece. The issue comes as the board, made using the :white_large_square: emoji, is smaller than the buttons. Also, the buttons take up two lines, as there are six of them. Is there a way to make the buttons similar in size to the emojis?

@bot.command(brief=" Begins your Connect 4 Game",
  description=
  " Displays the board and buttons, which will place your piece in the desired lane",
  Arguments="None")
async def Connect4(ctx):
  open_file = open(ctx.author.name,"w")
  open_file.write(":white_large_square:,:white_large_square:,:white_large_square:,:white_large_square:,:white_large_square:,:white_large_square:,:white_large_square:\n:white_large_square:,:white_large_square:,:white_large_square:,:white_large_square:,:white_large_square:,:white_large_square:,:white_large_square:\n:white_large_square:,:white_large_square:,:white_large_square:,:white_large_square:,:white_large_square:,:white_large_square:,:white_large_square:\n:white_large_square:,:white_large_square:,:white_large_square:,:white_large_square:,:white_large_square:,:white_large_square:,:white_large_square:\n:white_large_square:,:white_large_square:,:white_large_square:,:white_large_square:,:white_large_square:,:white_large_square:,:white_large_square:\n:white_large_square:,:white_large_square:,:white_large_square:,:white_large_square:,:white_large_square:,:white_large_square:,:white_large_square:")
  open_file.close()
  open_file = open(ctx.author.name,"r")
  board = []
  for _ in range(6):
    value = open_file.readline()
    board.append(value.strip("\n").split(","))
  open_file.close()
  L1 = "".join(board[0])
  L2 = "".join(board[1])
  L3 = "".join(board[2])
  L4 = "".join(board[3])
  L5 = "".join(board[4])
  L6 = "".join(board[5])
  button1 = Button(label="", emoji="1️⃣", style=discord.ButtonStyle.gray)
  button2 = Button(label="", emoji="2️⃣", style=discord.ButtonStyle.gray)
  button3 = Button(label="", emoji="3️⃣", style=discord.ButtonStyle.gray)
  button4 = Button(label="", emoji="4️⃣", style=discord.ButtonStyle.gray)
  button5 = Button(label="", emoji="5️⃣", style=discord.ButtonStyle.gray)
  button6 = Button(label="", emoji="6️⃣", style=discord.ButtonStyle.gray)
  view1 = View()
  view1.add_item(button1)
  view1.add_item(button2)
  view1.add_item(button3)
  view1.add_item(button4)
  view1.add_item(button5)
  view1.add_item(button6)
  message = L1 + "\n" +L2 + "\n" +L3+ "\n" +L4+ "\n" +L5+ "\n" +L6
  await ctx.send(message,view=view1)

Example image:enter image description here

2

There are 2 best solutions below

0
ArDaVaN81 On

Size Of Button Is Not Changeable !

But, You Can Change The Maximum Size Of Each Row/Column

To Get Something Like This :

1 2 3
4 5 6

0
GSB On

Since this is one of the first results that comes up when searching for something like "discord button width", I want to address this in some more detail.

Firstly, to answer your question, you can only have up to five buttons per action row, and up to five action rows per message (for a total of up to 25 buttons per message). See ActionRow documentation. So you will not be able to have all six buttons in one row. However, as ArDaVaN81's says, you can have two rows of three buttons. For your second question, I was not able to find any documentation on it but from my understanding and experience, you cannot decrease the button of a width past a certain minimum point. If you use only emojis in your buttons, then you will not have any control over the button's width.

Controlling button widths for buttons with text labels

This brings me to the point I wanted to address which does not answer your question, but may be useful to you if you opt to use text labels instead of emojis. For those that use text labels in their buttons, you can increase the width of your buttons using the same trick as the one used in Discord embeds- to encapsulate space characters inside zero-width space [\u200b] (or other non-whitespace) characters. You can also finely control these button widths using various different types of spaces. I like to use this website for example. Some example code:

let myActionRowBuilder = Discord.ActionRowBuilder()
  .addComponents(
    .setCustomId('!helloworld')
    .setLabel('\u200b    Hello World!     \u200b')  //you can insert different types of whitespace around "Hello World!" to finely control the button width
    .setEmoji(helloWorldEmoji) //optional- the emoji will appear on the far left
    .setStyle(Discord.ButtonStyle.Primary)
  );

Dynamically controlling button widths

Also, if you need to dynamically control your button widths, you can use this library. It has internally defined character widths for Discord's font, and then uses various space-padding characters to control the button width to within 0.5 units of the string's width. It does not do a perfect job, but it is certainly useful when your button label strings are unknown beforehand. Some example code below:

import { padStringToWidth } from 'discord-button-width';

let myActionRowBuilder = Discord.ActionRowBuilder()
    .addComponents(
        .setCustomId('!helloworld')
        .setLabel(`\u200b${padStringToWidth('Hello World!', 80, "center")}\u200b`)  //the zero-width space unicode characters are still needed
        .setEmoji(helloWorldEmoji) //optional- the emoji will appear on the far left
        .setStyle(Discord.ButtonStyle.Primary)
    );

I know a lot of people would have ended up here because of the title of the post, so I hope this is helpful to those looking to control Discord button widths with text labels.