How to update style of a button?

Eden · 2024-01-22T12:04:51.736Z

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

D

d.js toolkit•1/22/24, 12:04 PM

What's your exact discord.js

npm list discord.js

npm list discord.js

and node

node -v

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!

E

EdenOP•1/22/24, 12:07 PM

Also I'm using typescript

S

Svitkona•1/22/24, 12:07 PM

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

S

Svitkona•1/22/24, 12:07 PM

or this enum https://discord-api-types.dev/api/discord-api-types-v10/enum/ButtonStyle

E

EdenOP•1/22/24, 12:07 PM

I know how to style a button, I'm just not sure how to edit a specific button inside a message

E

EdenOP•1/22/24, 12:09 PM

right now the problem is that the components of the message I've fetched is the type of

ActionRow<MessageActionRowComponent>[]

ActionRow<MessageActionRowComponent>[]

ActionRow<MessageActionRowComponent>[]

ActionRow<MessageActionRowComponent>[], but when I use a

ButtonBuilder

ButtonBuilder

ButtonBuilder

ButtonBuilder to create a new button, I'm just not sure how to "compile" it into the type of

MessageActionRowComponent

MessageActionRowComponent

MessageActionRowComponent

MessageActionRowComponent so that typescript is happy

S

Svitkona•1/22/24, 12:13 PM

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

E

EdenOP•1/22/24, 12:16 PM

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})

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})

E

EdenOP•1/22/24, 12:16 PM

but the line

rows[row] = newRow

rows[row] = newRow

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)

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)

S

Svitkona•1/22/24, 12:26 PM

@Eden try this https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgQQMY2BAdgJQgdwCEBXYAGwBMBTKAGjhJhmxPOroeKewGUYBPMlXoBhCOGxUsMACr8wwuAFkqAZ1UBDAOZU4AXzgAzKOLgByCsFWpoFAHQArVWYDcAWABQnjav5ZURsT+GNhGEBAAFCAAXMpqmjoAlIiecGlwNliq8Egm+Kr6cAC8cCDuXh7pcKnpmdlwWFT4ePnFcHmqdiAaYBFQxQB8KZVVtdj1NmTEIFltUHY2Eo3Snd29-UVDCDWjo8CGcH12AgrFRSViS1Ky8lR2jMxYydsju2-tVDDEUFic3FisSg0OzGcRHCgaGAaRJ2VSfPiCKgRB68ARCOw8YioVDxRLld5VPSeHYEmAACzyDSacAAolATFAIgADACqjQAHgp0FQKBlxJBlvBgL8QPFtLoACQIEB2YAUPR2Wmcqjc3korCXAXXArYMj8Jl4kmEw0Vd5QT7fX6NfAodCYXAEQHsAA86qdNAGERhGgoFE1khWEUm0yyJuN5RJMvNYD1ERe70WWpWsWtLVUtBJehNeiAA

S

Svitkona•1/22/24, 12:27 PM

hmm... now it's showing errors lol

S

Svitkona•1/22/24, 12:27 PM

it wasn't showing errors when i got the URL

S

Svitkona•1/22/24, 12:27 PM

one sec

S

Svitkona•1/22/24, 12:28 PM

fixed https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgQQMY2BAdgJQgdwCEBXYAGwBMBTKAGjhJhmxPOroeKewGUYBPMlXoBhCOGxUsMACr8wwuAFkqAZ1UBDAOZU4AXzgAzKOLgByCsFWpoFAHQArVWYDcAWABQnjav5ZURsT+GNhGEBAAFCAAXMpqmjoAlIiecGlwNliq8Eg2ElhSMKqxJviq+nAAvHAg7l4e6XCp6ZnZcAX4eGVVcKWqdiAaYBFQVQB8KQ2NLdhtNmTEIFk9UHZ5kAXS-YPDo5UTCM3T08CGcCN2AgpVldVi+YVyCnaMzFjJh1PH371UMMRQLCcbhYViUGh2YziC4UDQwDSJOyqP58QRUCKvXgCIR2HjEVCoeKJOo-Rp6TxHUkwAAWpXaVHwcAAolATFAIgADACqBQAHgp0FQKBlxBtCnBgECQPFtLoACQIEB2YAUPR2Zn8qiC4WYrD3MVbODYMj8DnEylk831H5QP4AoEdFDoTC4Ahg9gAHl17poYwiiI0FAo+skWwi80WWStlrqlKVtrAJoinx+61DRViHS6qlolL0Vr0QA

EEden right now I'm trying this: ```ts let rows = msg.components const newRow = new Ac...

H

harnes.xyz•1/22/24, 12:30 PM

Create a new row and use static ButtonBuilder#from method

H

harnes.xyz•1/22/24, 12:30 PM

Then edit his property

H

harnes.xyz•1/22/24, 12:30 PM

And edit message with a new row

D

d.js docsAPP•1/22/24, 12:30 PM

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

E

EdenOP•1/22/24, 12:31 PM

I have all the button styles stored; can I just make a new button using

ButtonBuiler()

ButtonBuiler()

ButtonBuiler()

ButtonBuiler() or do I still need to use

ButtonBuilder.from()

ButtonBuilder.from()

ButtonBuilder.from()

ButtonBuilder.from()?

H

harnes.xyz•1/22/24, 12:32 PM

If you want to label and other values to be the same you should use ButtonBuilder#from

H

harnes.xyz•1/22/24, 12:32 PM

This basically creates a new builder from button json object

H

harnes.xyz•1/22/24, 12:32 PM

that you can access in message components property

H

harnes.xyz•1/22/24, 12:36 PM

Also you are missing this

D

d.js docsAPP•1/22/24, 12:36 PM

In TypeScript the

ActionRowBuilder

ActionRowBuilder

ActionRowBuilder

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)

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)

E

EdenOP•1/22/24, 12:37 PM

hmm okay I will do some experimentation ty

Similar Threads

Similar Threads

Similar Threads