Buttons

Buttons allows you to create reusable actions that are easily available to your users.

Like Modals, Buttons are handled in two parts: Creating buttons and Handling button clicks. The first part is also provided by Discord.JS, and only the latter is handled by the framework.

Creating Buttons

TIP

Buttons can be attached to any command interaction, meaning you can reuse the same handler across multiple commands.

import { defineSlashCommand } from 'chooksie'
import { MessageActionRow, MessageButton } from 'discord.js'

export default defineSlashCommand({
  name: 'joke',
  description: 'Sends a random joke.',
  setup: () => import('../api'),
  async execute(ctx) {
    const joke = await this.getRandomJoke()

    const button = new MessageButton()
      // IMPORTANT: this must match the handler's customId
      .setCustomId('delete-msg')
      .setStyle('DANGER')
      .setEmoji('🗑️')

    const row = new MessageActionRow()
      .addComponents(button)

    await ctx.interaction.reply({
      content: joke,
      components: [row],
    })
  },
})

import { defineSlashCommand } from 'chooksie'
import { MessageActionRow, MessageButton } from 'discord.js'

export default defineSlashCommand({
  name: 'joke',
  description: 'Sends a random joke.',
  setup: () => import('../api'),
  async execute(ctx) {
    const joke = await this.getRandomJoke()

    const button = new MessageButton()
      // IMPORTANT: this must match the handler's customId
      .setCustomId('delete-msg')
      .setStyle('DANGER')
      .setEmoji('🗑️')

    const row = new MessageActionRow()
      .addComponents(button)

    await ctx.interaction.reply({
      content: joke,
      components: [row],
    })
  },
})

const { defineSlashCommand } = require('chooksie')
const { MessageActionRow, MessageButton } = require('discord.js')

module.exports = defineSlashCommand({
  name: 'joke',
  description: 'Sends a random joke.',
  setup: () => require('../api'),
  async execute(ctx) {
    const joke = await this.getRandomJoke()

    const button = new MessageButton()
      // IMPORTANT: this must match the handler's customId
      .setCustomId('delete-msg')
      .setStyle('DANGER')
      .setEmoji('🗑️')

    const row = new MessageActionRow()
      .addComponents(button)

    await ctx.interaction.reply({
      content: joke,
      components: [row],
    })
  },
})

Handling Button Clicks

import { defineButtonHandler } from 'chooksie'
import type { Message } from 'discord.js'

export default defineButtonHandler({
  customId: 'delete-msg',
  async execute(ctx) {
    await ctx.interaction.deferReply({
      ephemeral: true,
    })

    const message = ctx.interaction.message as Message
    await message.delete()

    await ctx.interaction.editReply({
      content: 'Message deleted!',
    })
  },
})

import { defineButtonHandler } from 'chooksie'

export default defineButtonHandler({
  customId: 'delete-msg',
  async execute(ctx) {
    await ctx.interaction.deferReply({
      ephemeral: true,
    })

    const message = ctx.interaction.message
    await message.delete()

    await ctx.interaction.editReply({
      content: 'Message deleted!',
    })
  },
})

const { defineButtonHandler } = require('chooksie')

module.exports = defineButtonHandler({
  customId: 'delete-msg',
  async execute(ctx) {
    await ctx.interaction.deferReply({
      ephemeral: true,
    })

    const message = ctx.interaction.message
    await message.delete()

    await ctx.interaction.editReply({
      content: 'Message deleted!',
    })
  },
})