create-a-button.md

Button

Create a Button

To create a button in your project, it is recommended to use the provided CLI tool. This will ensure that your button is correctly generated and ready to implement.

CLI Pattern

bot add button

Example

For a "buy" button, you can obtain the following file at src/buttons/buy.ts, ready for implementation.

Define Button Parameters

Once the button is created, you can define any parameters the button will receive. Here’s an example of a "buy" button that takes an article and a quantity as parameters:

import { Button } from "#core/button"

export type BuyButtonParams = {
  article: string
  quantity: number
}

export default new Button<BuyButtonParams>({
  key: "buy",
  description: "The buy button",
  builder: (builder) => builder.setLabel("Buy"),
  async run(interaction, article, quantity) {
    await interaction.deferUpdate()
    await interaction.followUp({
      content: `You clicked the buy button for ${quantity}x ${article}!`,
      ephemeral: true,
    })
  },
})

---

Using the Button

After creating the button handler, you can instantiate and use the button in your bot’s interactions. Here is an example of how to send a button within a message:

import discord from "discord.js"
import buyButton from "#buttons/buy"

await channel.send({
  components: [
    new discord.ActionRowBuilder<discord.MessageActionRowComponentBuilder>().addComponents(
      buyButton.create({ article: "article 1", quantity: 3 }),
    ),
  ],
})

You can also use the button from an external function:

import discord from "discord.js"
import { createButton } from "#code/button"
import buyButton from "#buttons/buy"

await channel.send({
  components: [
    new discord.ActionRowBuilder<discord.MessageActionRowComponentBuilder>().addComponents(
      createButton(buyButton, {
        article: "article 1",
        quantity: 3,
      }),
    ),
  ],
})