How to update style of a button?

Hi, I'm trying to upgrade from v13 to v14. Given a message object, how can I update the style of a specific button?

13 Replies

- 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!

Eden•5mo ago

Also I'm using typescript

Svitkona•5mo ago

there aren't too many ways to style a button. you can check the available styles here https://discord-api-types.dev/api/discord-api-types-v10/interface/APIButtonComponentWithCustomId#style or this enum https://discord-api-types.dev/api/discord-api-types-v10/enum/ButtonStyle

Eden•5mo ago

I know how to style a button, I'm just not sure how to edit a specific button inside a message right now the problem is that the components of the message I've fetched is the type of ActionRow<MessageActionRowComponent>[], but when I use a ButtonBuilder to create a new button, I'm just not sure how to "compile" it into the type of MessageActionRowComponent so that typescript is happy

Svitkona•5mo ago

well, you need to narrow it first to ButtonComponent then you should be able to do ButtonBuilder.from(component)

Eden•5mo ago

right now I'm trying this:

let rows = msg.components
const newRow = new ActionRowBuilder(rows[row]);
const button = new ButtonBuilder()
newRow.components[column] = button
rows[row] = newRow
await msg.edit({components: rows})

let rows = msg.components
const newRow = new ActionRowBuilder(rows[row]);
const button = new ButtonBuilder()
newRow.components[column] = button
rows[row] = newRow
await msg.edit({components: rows})

but the line

rows[row] = newRow

rows[row] = newRow

gives

Type 'ActionRowBuilder<AnyComponentBuilder>' is missing the following properties from type 'ActionRow<MessageActionRowComponent>': type, equalsts(2739)

Type 'ActionRowBuilder<AnyComponentBuilder>' is missing the following properties from type 'ActionRow<MessageActionRowComponent>': type, equalsts(2739)

Svitkona•5mo ago

@Eden try this https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgQQMY2BAdgJQgdwCEBXYAGwBMBTKAGjhJhmxPOroeKewGUYBPMlXoBhCOGxUsMACr8wwuAFkqAZ1UBDAOZU4AXzgAzKOLgByCsFWpoFAHQArVWYDcAWABQnjav5ZURsT+GNhGEBAAFCAAXMpqmjoAlIiecGlwNliq8Egm+Kr6cAC8cCDuXh7pcKnpmdlwWFT4ePnFcHmqdiAaYBFQxQB8KZVVtdj1NmTEIFltUHY2Eo3Snd29-UVDCDWjo8CGcH12AgrFRSViS1Ky8lR2jMxYydsju2-tVDDEUFic3FisSg0OzGcRHCgaGAaRJ2VSfPiCKgRB68ARCOw8YioVDxRLld5VPSeHYEmAACzyDSacAAolATFAIgADACqjQAHgp0FQKBlxJBlvBgL8QPFtLoACQIEB2YAUPR2Wmcqjc3korCXAXXArYMj8Jl4kmEw0Vd5QT7fX6NfAodCYXAEQHsAA86qdNAGERhGgoFE1khWEUm0yyJuN5RJMvNYD1ERe70WWpWsWtLVUtBJehNeiAA hmm... now it's showing errors lol it wasn't showing errors when i got the URL one sec fixed https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgQQMY2BAdgJQgdwCEBXYAGwBMBTKAGjhJhmxPOroeKewGUYBPMlXoBhCOGxUsMACr8wwuAFkqAZ1UBDAOZU4AXzgAzKOLgByCsFWpoFAHQArVWYDcAWABQnjav5ZURsT+GNhGEBAAFCAAXMpqmjoAlIiecGlwNliq8Eg2ElhSMKqxJviq+nAAvHAg7l4e6XCp6ZnZcAX4eGVVcKWqdiAaYBFQVQB8KQ2NLdhtNmTEIFk9UHZ5kAXS-YPDo5UTCM3T08CGcCN2AgpVldVi+YVyCnaMzFjJh1PH371UMMRQLCcbhYViUGh2YziC4UDQwDSJOyqP58QRUCKvXgCIR2HjEVCoeKJOo-Rp6TxHUkwAAWpXaVHwcAAolATFAIgADACqBQAHgp0FQKBlxBtCnBgECQPFtLoACQIEB2YAUPR2Zn8qiC4WYrD3MVbODYMj8DnEylk831H5QP4AoEdFDoTC4Ahg9gAHl17poYwiiI0FAo+skWwi80WWStlrqlKVtrAJoinx+61DRViHS6qlolL0Vr0QA

Harnes•5mo ago

Create a new row and use static ButtonBuilder#from method Then edit his property And edit message with a new row

d.js docs•5mo ago

(static) ButtonBuilder.from() Creates a new button builder from JSON data

Eden•5mo ago

I have all the button styles stored; can I just make a new button using ButtonBuiler() or do I still need to use ButtonBuilder.from()?

Harnes•5mo ago

If you want to label and other values to be the same you should use ButtonBuilder#from This basically creates a new builder from button json object that you can access in message components property Also you are missing this

d.js docs•5mo ago

In TypeScript the ActionRowBuilder class has a generic type parameter that specifies the type of component the action row holds:

const row = new ActionRowBuilder<ButtonBuilder>().addComponents(button)
const row = new ActionRowBuilder<StringSelectMenuBuilder>().addComponents(selectMenu)
const row = new ActionRowBuilder<TextInputBuilder>().addComponents(textInput)

const row = new ActionRowBuilder<ButtonBuilder>().addComponents(button)
const row = new ActionRowBuilder<StringSelectMenuBuilder>().addComponents(selectMenu)
const row = new ActionRowBuilder<TextInputBuilder>().addComponents(textInput)

Eden•5mo ago

hmm okay I will do some experimentation ty

Gaming

Programming

How to update style of a button?